Floating elements

A very powerful positioning technique is floating. It allows you to take a block level element out of the normal order and let other elements float around it. For instance, this can be used to place an image to the left or the right, while letting text float around it, as seen in magazines and newspapers. However, this is not how HTML and CSS works by default, when you place an image next to some text. Just have a look at this example to see what I mean:

<style type="text/css">  
.container {  
    width: 300px;  
    background-color: Gainsboro;  
    padding: 10px;  
    text-align: justify;  
}  
</style>  

<div class="container">  
    <img src="http://www.css3-tutorial.net/images/csstutorial_logo.png">  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor placerat metus, sit amet egestas dui rutrum sed. Aliquam eget fringilla metus, vel pulvinar turpis. Mauris consectetur purus convallis nibh consectetur, nec mattis nisi euismod.  

</div>

As you can see, the text starts at the bottom right corner of the image, instead of just using up all the free space to the right of the image and this would be even worse if you tried to line up other block level content next to the text. The simple solution to this is to allow the image to float, either to the left or the right. This will "pull up" surrounding elements so that they can use the remaining space.

Now let's add a bit of floating magic to the first example, so that you can see the difference:

<style type="text/css">
.container {
    width: 300px;
    background-color: Gainsboro;
    padding: 10px;
    text-align: justify;
}

.image {
    float: left;
    margin: 0 10px 10px 0;
}
</style>

<div class="container">
    <img src="http://www.css3-tutorial.net/images/csstutorial_logo.png" class="image">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor placerat metus, sit amet egestas dui rutrum sed. Aliquam eget fringilla metus, vel pulvinar turpis. Mauris consectetur purus convallis nibh consectetur, nec mattis nisi euismod.
</div>

Notice how the text is now moved up so that it uses the available space to the right of the image. That's because the image is now floating and therefore allows other elements to be displayed next to it - both inline and block level elements. Try changing the value of the float property from left to right and see how easy it is to get that cool, magazine/newspaper-like look!

Clearing after a float

When you start floating your elements, you will very likely soon run into a common problem: When you have a floating element, all content after it will move up next to it, if there's enough space. Let me illustrate it with an example:

<style type="text/css">  
.container {  
    width: 300px;  
    background-color: Gainsboro;  
    padding: 10px;  
    text-align: justify;  
}  

.image {  
    float: left;  
    margin: 0 10px 10px 0;  
}  

.footer {  
    background-color: Azure;  
    text-align: center;  
}  
</style>  

<div class="container">  
    <img src="http://www.css3-tutorial.net/images/csstutorial_logo.png" class="image">  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor placerat metus, sit amet egestas dui rutrum sed.  
    <div class="footer">Footer</div>  
</div>

In this case, we want the footer element to take up all the space after the image of the text, but because the text doesn't take up enough room, the footer is moved up right below the text and then partly overlapped by the image. The solution to this problem comes from the clear property. It's specifically designed to clear existing floats, so that elements are once again laid out like you would expect from HTML and CSS.

The clear property takes one of three different values: Both, Left or Right. This tells the browser if you want to clear only floats from the left or the right or if you want to clear floats from both directions. Look how easy we can fix the before mentioned issue simply by adding the clear property:

<style type="text/css">
.container {
    width: 300px;
    background-color: Gainsboro;
    padding: 10px;
    text-align: justify;
}

.image {
    float: left;
    margin: 0 10px 10px 0;
}

.footer {
    background-color: Azure;
    text-align: center;
    clear: both;
}
</style>

<div class="container">
    <img src="http://www.css3-tutorial.net/images/csstutorial_logo.png" class="image">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor placerat metus, sit amet egestas dui rutrum sed.
    <div class="footer">Footer</div>
</div>

The trick here is to utilize the clear property right before the content which you want to stay away from the floated content. In this case, we can simply apply it to the footer element, because it holds the content that we want out of the floated area, but in other situations, you may want to simply add an invisible div element to stop floating - this will be demonstrated in the next example.

The problem with collapsed parent element

Another very common problem with floats is the issue of the collapsing parent element. Consider this example:

<style type="text/css">
.parent {
    background-color: Gainsboro;
}

.child {
    float: left;
    margin: 10px;
    background-color: CornflowerBlue;
    width: 50px;
    height: 50px;
    padding: 5px;
}
</style>

<div class="parent">
    <div class="child">Box</div>
    <div class="child">Box</div>
    <div class="child">Box</div>
</div>

Try it out and see if you can spot the problem. That's right - the parent element is not visible at all! You should have been able to see it because of the gray background color, but instead, the three floating elements just sit there as if they had no parent.

Why? Because floating elements does not reserve any space in its parent element and since there are only floating element inside the parent div, it collapses as if it was empty . If you add a word below the three child divs, you will actually be able to see the parent element, but it now only reserves space for this word (the only non-floating element), meaning that the parent will only be as high as a single line of text, with the three boxes hanging out of the bottom.

The solution? Actually the exact same one as we used above. By clearing all floats before the end of the container, the browser is forced to reserve space inside of it right down to the clearing element. Here's a working example:

<style type="text/css">
.parent {
    background-color: Gainsboro;
}

.child {
    float: left;
    margin: 10px;
    background-color: CornflowerBlue;
    width: 50px;
    height: 50px;
    padding: 5px;
}

.clear {
    clear: both;
}
</style>

<div class="parent">
    <div class="child">Box</div>
    <div class="child">Box</div>
    <div class="child">Box</div>

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

Notice how we just added the empty clearing div at the bottom of the parent element to fix this problem. It simply uses the CSS clear property to clear floats from both directions and you will likely be using this technique quite a bit when you start working with floating elements.

Summary

Floating is an extremely powerful technique that you will likely end up using quite a bit - it quickly becomes essential when you want to do more detailed layouts. However, it does come with a small price of added complexity. We have already showed you a couple of the "extraordinary" behaviors you will run into when using floats and there are more of them out there.

So, if your webpage starts acting strange, then always look out for any sort of positioning, especially floats - they are often to blame, because they simply make it harder for the browser to interpret what you want.