Lesson 10 - Floating content in HTML

HTML and CSS First website Floating content in HTML

In the previous lesson, Layout and backgrounds in HTML, 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:

Article with header and section in HTML

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:

Article with header and section in HTML using float

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:

Float left in HTML and CSS

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:

Floating left in HTML and CSS

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:

Float left in HTML and CSS

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:

Float left in HTML and CSS

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:

Float left in HTML and CSS

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.


 

Download

Downloaded 61x (76.68 kB)
Application includes source codes in language HTML

 

 

Article has been written for you by David Capka
Avatar
Do you like this article?
2 votes
The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn College The author learned IT at the Unicorn College - a prestigious college providing education on IT and economics.
Activities (10)

 

 

Comments

Avatar
Prinz_Div
Member
Avatar
Prinz_Div:3/25/2017 13:29

Does it means that we no longer have to deal with the index.html file and now designing is between layout.html and style.css?

 
Reply 3/25/2017 13:29
Avatar
David Capka
ICT.social team
Avatar
Replies to Prinz_Div
David Capka:3/26/2017 5:15

Just for a short while, you'll get back to index.html and other pages once the layout is done.

Reply 3/26/2017 5:15
You can walk through a storm and feel the wind but you know you are not the wind.
Avatar
saviour
Member
Avatar
saviour:4/9/2017 12:30

HI Dave, I think you got me confused in the wraping part. You said we should put the Div clear below <section> but you set the code below </section>. Please should the Div begin right after <section> or below </section>

 
Reply 4/9/2017 12:30
Avatar
saviour
Member
Avatar
saviour:4/9/2017 12:34

Also, should this css code background url{"image.png"}; be set inside the body codes because i tried putting on it outside the body class but it didn't work.

 
Reply 4/9/2017 12:34
Avatar
David Capka
ICT.social team
Avatar
Replies to saviour
David Capka:4/10/2017 3:54

I meant under the <section> element, not the tag. So after </section> :) The CSS code has to take a place in your .css file. Check the attached file.

Reply 4/10/2017 3:54
You can walk through a storm and feel the wind but you know you are not the wind.
To maintain the quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it's free.

5 messages from 5 displayed.