Floated Block

From CSS Discuss

Jump to: navigation, search

A block level element with one of the Css Rules:

float:left;
float:right;

Floated elements are removed from the ordinary flow of the document (but are still affected by it) and placed as far to the left or right as they can go within their Containing Block.

Their original use was the equivalent of old HTML image alignments -- images "dropped" into the text, with the text flowing around them.

However, many further uses have been devised for floats: see Float Layouts for the list.

Width

These must have a width property specified -- this is a frequently encountered problem. Browsers that break floats with no width in some way are not buggy.

Bugs

All versions of Internet Explorer suffer from the Double Margin Bug. Floats magically acquire excess margin, or their internal elements do. The fix is remarkably simple: apply the rule display: inline to the floated element. This has no meaning to other browsers, since floating an element automatically forces its display value to be "block".

"If a div is given a background colour and contains floated items (floated using CSS's float or HTML's align on images), things can go very wrong in Internet Explorer". More information and solutions can be found here.


Personal tools