1. Home
2. Developer Center
3. Dreamweaver Developer Center
4. CSS Advisor

CSS Advisor

Float Drop - floated elements drop below their expected position.

Problem

If a container (including the body) is not wide enough to display both a float and the static content that follows it side by side, the static content will drop below the float instead of wrapping around it.

Solution

Wrap content in a fixed-width container large enough to accommodate the content, or remove the width from the static block.

Detailed description

If a container (including the body) is not wide enough to display both a float and the static content that follows it side by side, the static content will drop below the float instead of wrapping around it in Internet Explorer.  This is most frequently caused by an 'unwrappable' text string or inline element that is wider than the container element.   Even if you explicitly state a width, IE 6 and earlier versions will not allow the 'unwrappable' element to overflow and maintain the correct width, which results in the corresponding floated element to 'drop' below it's predecessor.

For example, using the following HTML code:

<div id="wrapper">
  <div id="header">Site Header</div>
  <div id="nav">Left Nav withverylongandunbreakabletextstring</div>
  <div id="content">This is where my main text goes.</div>
  <div id="footer">Site Footer</div>
</div>

and the following CSS code:

#header { 
  background-color: #FFFFFF; } 
#nav { 
  background-color: #FF0000; 
  width: 50px; 
  float: left;  } 
#content { 
  background-color: #00FF00; 
  width: 350px; 
  float: left; } 
#footer { 
  background-color: #0000FF; 
  clear: both;  } 
#wrapper { 
  width: 400px; }

Firefox/Safari will allow the 'unbreakable' text string in the #nav div to overflow correctly and let the next div - #content - to float alongside it as expected:

Whereas in IE, the #nav div will expand beyond it's stated width, and the #content div will drop down below the #nav div (i.e. float drop).

IE6 will also drop a float due to use of italicized text that should fit comfortably inside the box. The fix for that is to set word-spacing on the paragraph containing the italicized text to 1px.

The infamous 3-pixel text jog bug can also cause float drop, and may be a cause of this occurring in absence of any other discernable trigger case.  If you're debugging and running into a wall, make sure to use the Holly Hack to get around the 3-pixel text jog bug and see if that helps clear up the float drop bug as well.

This bug was documented by artcoder and Big John at positioniseverything.net- be sure to check out the artlcle there for much more detail and information. 

Big thanks to Al Sparber for calling out version specificity, and providing the italics bug that can also cause float drop (and it's fix).

firefox_floatdrop.jpg
ie_floatdrop.jpg

Text ID: FLOAT_DROP

---