January 10th, 2007 - by Paul OB

In this post I would like to talk about one aspect of floats that is often misunderstood which is how the backgrounds, borders, margin and padding are handled on content that wraps around a floated element.

When an element (perhaps an image) is floated alongside some text then the text is moved out of the way and allowed to wrap around the floated element as required. This is understood quite well and everything works smoothly until perhaps the text has a background color or borders such in the case of a styled heading as shown in the code below.

Consider this code:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6.  
  7. <style type="text/css">
  8. #outer{width:350px;border:1px solid #000;padding:5px;}
  9. #outer img {
  10. float:left;
  11. margin:.3em 15px 10px;
  12. }
  13. h1{
  14. margin:.5em 0;
  15. background:red;
  16. border:2px solid #000;
  17. color:#fff;
  18. }
  19. p{padding:5px;}
  20. </style>
  21.  
  22. </head>
  23. <body>
  24.  
  25. <div id="outer"> <img src="images/volcano-small.jpg" alt="Example image" width="100" height="100" />
  26. <h1>Heading Text</h1>
  27. <p>Some text content that will wrap around the floated image : Some text content that will wrap around the floated image : Some text content that will wrap around the floated image : Some text content that will wrap around the floated image : Some text content that will wrap around the floated image </p>
  28. </div>
  29.  
  30. </body>
  31. </html>

The h1 heading text is at the top right side of the image as expected but the red background and borders of the heading travel all the way under the image back to the edge of the parents padding. This is not usually what the designer expected but the reasoning is quite simple.

Floats are removed from the flow and therefore any padding, borders or backgrounds on the repelled content will still slide under the float as if the float wasn’t there. In order to move the h1 completely clear of the float you would need to give it a margin greater than the width of the floated content that lies alongside it. In the above code you would need to change the margin left to 120px as follows:

  1. h1{
  2.     margin:.5em 0 .5em 120px;
  3.     background:red;
  4.     border:2px solid #000;
  5.     color:#fff;
  6. }

Here is an image showing the differences the above code produces:

Example of before and after applying the extra code

Now, as you can see, the h1 heading is clear of the image and so are all its borders and background colours and of course this looks a lot neater.

Note that the margin on the floated element itself will not only push the floated element the required distance from its parents boundaries but will also ensure that any foreground content does not get any closer than the margin specified. However as noted above if you want the background and borders of the repelled content to steer clear of the float also then you need to set a margin on the content to accommodate this.

If you have specified a 15px margin then the float will be at least 15px away from any other floated object but will also ensure that the foreground content of the static element that follows is also 15px away. The reverse won’t be true and any margins on the static content will slide under the float until it meets the parents borders as explained above.

While we are on the subject of margins then it is probably worth mentioning here the double margin bug in IE6 and under that applies to the side edge of a float that is nearest its parents side edge (or viewport side edge). The left or right margin (whichever is adjacent to its parents edge) will be doubled in error in IE6 and under. This does not apply to replaced elements like images in ie6 but does apply to everything else.

If the example above had the image wrapped in a paragraph tag or div and the float applied to those elements instead then the 15px margin on the left side would be doubled to 30px in error.

Luckily there is a fix for this and it simply means adding display:inline to the floated element and the bug is fixed. There is really no rhyme or reason to the bug and its fix and its more a case of using one bug to fix another. When an element is floated then its display is set to block anyway and can’t be re-assigned via css and therefore the fix is safe for other browsers to see, as they know better.

There is a lot more that I could talk about floats but I’ll save that for another day.

One Response to “CSS Floats – Repelling Content”

1 What CSS Did We Learn in 2007

[...] CSS Floats – Repelling Content [...]

mulberry sale spyder womens jacket cheap new balance 574 mulberry outlet cheap new balance 574 arcteryx outlet mulberry sale spyder womens jacket mulberry sale spyder womens jacket mulberry outlet mulberry outlet new balance 574

Popular Articles

Top 10 Commentators


Subscribe to this feed! Subscribe by Email!

Random Bits Podcast

You need to download the Flash player from Adobe

Blogs Worth Reading