Check out "Do you speak JavaScript?" - my latest video course on advanced JavaScript.
Language APIs, Popular Concepts, Design Patterns, Advanced Techniques In the Browser

CSS: using float property

float property is one of those CSS rules which are somehow difficult to understand. Before a couple of days I had a problem with floating divs. I solved it and decided to write an article about the solution. The article also covers some basics about floating.

Basic usage

The main function of the float property is to make the content floats around an element. I.e. if you need a text wrapping an image you should set float to the image. For example: example

And the result is:

Check out this Pen!

There are four possible values of float - left, right, none (default) and inherit. I think that they are self-explanatory.

What you should remember, is that the floating continue until you clear it. In other words, no matter how many elements you add they will still wrap the floated block. In the example below the element should be below the image, but because there is no clearing, it looks like that:

Check out this Pen!

Clearing

There are mainly two ways to clear the floating. Adding an empty block element which has clear property set:

example

The other way is to use pseudo class after.

example

And the result is:

Check out this Pen!

Very often the float property is used for building navigation. I.e. a lot of front-end developers use unordered list with all its elements floated to left or right. For example:

Check out this Pen!

Layout composition

float is used in many frameworks for layout composition. It's easy to define content blocks and arrange them. Here are three column layout:

Check out this Pen!

Another common pattern is to style a page component. Let's say that you have a user account block:

Check out this Pen!

Problems

There are tons of great articles that explain the most common problems regarding float property. I don't think that I'll describe them in a better way so I'll suggest to read this article or for example check out here. I think that most of the troubles come from the fact that the developer doesn't know how the floating works. Of course there are cases where the bugs are because of the browser or forgotten clear element. What I wanted to share is actually a problem that I've met. Here is my layout - it's just a list of info boxes and the idea is to have three per row:

Check out this Pen!

The problem occurs once some of the elements has more text. All the boxes are floated to the left, but because the second one has a lot of text its height is more than expected the result is not very good. I tried several solutions, but none of them were flexible enough. I had to find some trick to put clear: both after every third element. Of course I didn't know the actual number of elements, I didn't want to use javascript or set custom css classes. Then I realized that nth-child selector will do the job:

.info-box:nth-child(3n+4) { clear: both; }

Check out this Pen!

If you enjoy this post, share it on Twitter, Facebook or LinkedIn.