This post is about CSS floats. Well floats are pretty simple. There is nothing complicated about them. Complication only arises of two things. One is using them in a complex manner and the second is cross browser compatibility issues.

Let’s recap what we know about browsers. Every tag in HTML or XHTML basically creates an “element”. And that element can be either of two types when it comes to rendering. Either it can be an inline element or it can be block element.

Inline elements, when appear in succession, would be placed let to right (or right to left if page direction is right to left which can be set in the html tag’s dir attribute i.e dir=”rtl”) till the end of line.

While the block level elements sit on top of each other and expand horizontally to fully expand the space.

But we can do an interesting thing to a block level element. We can order it to float it self. But where it should float? We can ask it to float either on the right side or on the left side. So when we ask an element to float, it would be plucked out of the sequence in which it was previously appearing. And when plucked out then of course that space would be pretty much empty. What do we do with that space then? Well we do not have to do anything. If there is another element just after the one being floated, it would take the place of the floated element.

Astute reader may ask that because block level elements fully expand till the width available so if they are floated left or right, it would have no difference other then that the element after the floated one would be taking place of the floated element.

Quit correct. That is how it would be happening. But think of this. You have a block level element whose dimensions are 50px (i.e 50px in width and 50px in height). If order this element to float towards right (and we will see how to do that) then what will happen?

Well simply two things:

  • The element’s right margin would be touching to the right boundary of the containing element
  • The element after the floated element would be pulled 50px up because the space would be freed up by the floated element

So that is how floats work. There’s only one thing that is left about them. And that is that what if you do not want the element after the one being floated to come up and fill up the space? Yes that’s perfectly possible as well. We can do that and we will see in a while how.

Technically speaking

Suppose there is an element with class float-it and another element with class after-floated

So here’s the markup:

  1. <p>A block level element. That is, paragraph</p>
  2. <!-- This will be floated left
  3. But we will apply little beautification to it:
  4. * border would be set
  5. * background-color would be set
  6. * height and width would be set to 150 px
  7. -->
  8. <div class="float-it">50x50</div>
  9. <!-- We will see the use of this later --->
  10. <div class="after-floated">just floated</div>
  11. <p>Another block level element</p>

And we apply the following CSS:

  1. .float-it{
  2. float:right;
  3. }
  4. /* This is just cosmetics */
  5. body{
  6. background-color: #CCC;
  7. }
  8. /*
  9. * Border and background just for illustration
  10. * While height and width just to demonstrate.
  11. */
  12. .float-it {background-color: #FCFC09;
  13. width: 150px;
  14. height: 150px;
  15. border: 1px solid black;
  16. }
  17. .after-floated{border: 1px solid green;}

So as we have set the float property to right, the box is pushed to right. Possible values for float property are:

float: left|right|none

none is useful if an element is already floating and you want to turn that off.


So that was about floats. And its only that much believe me. Only one thing that I have not touched is clearing which is even more easier then floats. Let’s recap about the floats. We have a float property with which we can ask an element to float itself either to the left or right side of the containing block (that can be body, or the div in which that element appears). The element just after the floated element would be pulled up to take up the space because the element above it is now floating and no more in the document flow.