Web design tutorials
Understanding and using CSS floats
CSS floats can be tricky to grasp at first, but open up a huge array of possibilites when mastered. I will cover the basics in this tutorial, including left and right floating elements and the clear command.
Introduction
When we talk about "floats" in CSS, we refer to elements that can be pushed to the left or the right, while other elements wrap around them. Let's have an example. I'm just going to take a normal, red block, created by a <div> element.
Floating left
Now what I'm going to do is assign the float: left; CSS property to it, and put it next to a paragraph of dummy text:
Vestibulum adipiscing, arcu eu pulvinar iaculis, quam quam facilisis neque, sit amet placerat nunc ante nec massa. Maecenas sit amet magna. Nulla eu justo. Nullam quis diam. Maecenas adipiscing malesuada neque. Aliquam elementum venenatis elit. Mauris blandit ultricies tortor. Donec convallis pharetra quam. In eget tortor eu augue adipiscing porta. Nunc mauris augue, sodales ut, porttitor et, pretium ac, justo. Ut eget tortor. Phasellus ac orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur eleifend est quis eros. Phasellus pretium dolor viverra massa varius semper. Nulla porta. Duis posuere elit vel quam. Maecenas eget purus eu nibh dictum lacinia. Vestibulum cursus aliquet lectus.
The block of text adjusts its width according to the floated element. The CSS code for this block is as follows.
CSS
.float_l_block {
position: relative;
width: 80px;
height: 80px;
background: red;
margin: 0px 0px 10px 10px;
float: left;
}
Floating right
In the same way, an object can float to the right, by changing the CSS from float: left; to float: right;, and shuffling the margins, which gives the following:
Vestibulum adipiscing, arcu eu pulvinar iaculis, quam quam facilisis neque, sit amet placerat nunc ante nec massa. Maecenas sit amet magna. Nulla eu justo. Nullam quis diam. Maecenas adipiscing malesuada neque. Aliquam elementum venenatis elit. Mauris blandit ultricies tortor. Donec convallis pharetra quam. In eget tortor eu augue adipiscing porta. Nunc mauris augue, sodales ut, porttitor et, pretium ac, justo. Ut eget tortor. Phasellus ac orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur eleifend est quis eros. Phasellus pretium dolor viverra massa varius semper. Nulla porta. Duis posuere elit vel quam. Maecenas eget purus eu nibh dictum lacinia. Vestibulum cursus aliquet lectus.
Multiple floats
You can float as many elements as you want. Here, I've placed multiple left floats, and they will line up until they run out of horizontal space. Then they will move to the next line, and continue lining up.
Floating left and right
You can have left and right floated elements on the same line as eachother, as demonstrated here:
You can stack up as many as you want to the left and the right. If you really want, you can put a paragraph in the middle.
Vestibulum adipiscing, arcu eu pulvinar iaculis, quam quam facilisis neque, sit amet placerat nunc ante nec massa. Maecenas sit amet magna. Nulla eu justo. Nullam quis diam. Maecenas adipiscing malesuada neque. Aliquam elementum venenatis elit.
Clearing floats
Anyone who's played around with floats for a bit will have come across the following problem. Say you have lots of images, and each one has a short description. You float the image to the left, and the text lies next to it. However, you end up with this:
This is an image.
This is another image.
This isn't right. We want them to be neatly organised, with each image on a new line. The way to do this is with the clear CSS property. This will cause any floating to stop, and it can be used to clear left, right or both floats. Let's add a <div> element between these two "images", and apply the clear: left; CSS property.
This is an image.
This is another image.
Beautiful! Just to clarify, the HTML and CSS are:
HTML
<div class="float_l_block"></div>
<p>This is an image.</p>
<div class="clear_left"></div>
<div class="float_l_block"></div>
<p>This is another image.</p>
CSS
.clear_left {
clear: left;
}
Floats in action
There are plenty of examples of floated elements on my website. The main content box that you're reading from now and the navigation box to the right have been lined up by applying the float property. My photography section has a gallery made up of floated thumbnails.
Using floats is the preferable replacement of using an HTML table to line up content. Once you've learnt how to use them properly, you can get away from the limitations of table-based layouts, and get some really creative results.
Comments
There are no comments on this tutorial. Why not be the first?