Lesson 10 - Floating content in HTML

In the previous exercise, Solved tasks for HTML and CSS lessons 6-9, we've practiced our knowledge from previous lessons.

In the previous lesson, Solved tasks for HTML and CSS lessons 6-9, we started working on our page's layout. In today's lesson, we're going to continue working on it.

We ended the previous lesson by adding an <article> tag that had <header> and <section> elements within it. Our website looks like this at the moment:

The <header> and <section> elements are block elements. Their default behavior is that they stretch over the entire width of the element they're in (in our case, the entire article) and stack under one another.

However, we want the following layout due to its nicer and more creative design:

We want the <header> and the <section> to be next to each other, not below. To do that, we'll make them "float" in a certain direction. Floating elements are ordered horizontally in case they have specific sizes.

Let's move to style.css and set the article header to a certain width and mark it as floating. With what you know up until now, you'd only be able to achieve that by assigning a class to the header in HTML and then using the class selector. However, you would be better off using the following selector:

article header {
}

This selector selects every header of every article in the page (including the <header> elements nested in the <article> element). Since we will always only have a single <article> and <header> on each page, this approach will work properly. As a matter of fact, selecting the <header> would suffice, but then if we had more of them on a page later on it would no longer work. Which is why we set it as such.

The approach we have set works even when the header isn't nested in the article element directly, but through some other nested div (we'll get to what <div> is good for later on):

<article>
    <div>
        <header>
        ...
        </header>
    </div>
    ...
</article>

As for dealing with the selector, having the <header> somewhere in <article> will suffice. If we wanted the selector to exclusively select elements nested directly (i.e. child elements), we would use a greater-than sign:

article > header {
}

The header from the example above wouldn't be selected now because it's not nested directly in the article.

That was just a little tip to deepen your knowledge of selectors. It's on you to pick which one you want to use.

Floating content

CSS allows us to mark specific elements on a page as floating. Floating elements are stacked next to each other and are flown around by non-floating contents.

Now onto the properties, we'll set the header width to 250 pixels and the float property to "left". Meaning that the element is floating and will be placed left to the other floating element of the page.

article header {
    width: 250px;
    float: left;
}

We'll select the section int the same way. Set the width to 710 pixels and make it float left. Then, set the background as white. This way, the text will be more readable, you should avoid having text on a background with a color other than white when designing pages.

article section {
    width: 710px;
    float: left;
    background: white;
}

Websites are, for the most part, 960px wide, so that they would fit on most displays (you don't even have to worry about anything that slightly exceeds 1000px, nowadays). If you look at the dimensions, the sum of both column widths equals exactly 960 pixels.

If we check our website now, there is an unpleasant surprise waiting for us:

Elements containing the article title and content (<header> and <section>) are next to each other, as expected. However, the <article> element's background disappeared. Why is that?

When we stack floating elements next to each other, we have to clear the floating properly after the last element in the row. We do that using CSS' clear. Add a new class selector into your CSS:

.clear {
    clear: both;
}

The "both" value means that we want to stop floating from both sides. We could also set the value to "left" or "right".

Now let's move to the HTML and add a <div> element with a "clear" class after the <section>. This element stops the wrapping process:

</section>
<div class="clear"></div>

The result is as expected:

Keep in mind that in the article, there are <header> and <section> elements which both have their width specified and the float set to "left", so they are stacked next to each other. There is also a <div> after the last one, which stops the floating.

The <div> doesn't have any meaning in HTML and is only used for styling. It's block element. In older versions of HTML, divs were used for defining headers, footers, articles, etc. HTML 5 tags didn't exist back in those days. Another similar element is the <span> element, which doesn't carry any meaning and is what is known as "inline". is often used to style text, like this:

<p>I like the <span class="violet">violet</span> color.</p>

If we set the color violet to the "violet" class in the CSS file of the example above, the word "violet" would actually be violet. Even though you probably get it by now, I'll go over it once more just to be sure. It would be absolutely inappropriate to use <span> to mark text as bold because it would not add any meaning to the text and would only style it visually. For that reason, divs and spans are used minimally and in moderation.

Wrapping contents around

Let's go a bit deeper into the float property, which can do several more things.

If we had other non-floating contents around floating elements, for example, a text around a floating image, the text would wrap around the image. I'm sure you are familiar with this sort of behavior from MS Word.

We have an image like that on our website, and we just so happen to have it in a separate paragraph. Let's say we want it to be inserted into the text. Add it to the paragraph: ,

<p><img src="images/avatar.png" alt="HoBi the programmer" />My name is Jack Bittner and I'm 20 years old...

The image will be added into a line:

Now let's define a "left" CSS class selector, which makes any element that belongs to that class float left:

.left {
    float: left;
}

Now, add the "left" class to the image:

<img src="images/avatar.png" alt="HoBi the programmer" class="left" />

Here's what it should look like now:

As you can see, the non-floating contents (text) wrap over our floating image, which is aligned on the left. Once again, let's stop the wrapping process using a <div> with the "clear" class. This time, let's do it somewhere in between the paragraphs:

...I play sports.</p>
<div class="clear"></div>
<p>My main hobby is...

Wrapping ended right before the last paragraph, which made the last paragraph show up on a separate line:

You are now capable of wrapping contents around images and other elements, as well as stacking elements under each other. Now, put the image back in the separate paragraph, it looked better that way. However, you may need wrapping one day, and now you know how. The code we worked on today is available for download below, as always. In the next lesson, Border, shadow and the boxmodel in CSS, we'll go over the box model and finish the article area.

 

Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.