Taming the Float Attribute

When first getting acquainted with HTML, you learnt that you could place an image in the text flow and either align="left" or align="right" and the text would flow round the image. As time went on and CSS became the prefered way to add decoration to the mark-up, you stumbled across the float:left and float:right attributes that provided the same outcome as your original mark-up - or did they? In this respect not all browsers were or are equal.

Before continuing, the page will be easier to read if the three tricolor divs on the lefthand side are floated left to form a banner at the top of the page. You can do that by clicking on the 'Float Left' button.

All self-respecting W3C compliant browsers are capable of handling float:left and float:right correctly, provided the last float in a sequence is cleared. Using the <br style="clear:both" /> tag is the standard method of doing that, though non mark-up methods using the pseudo attribute :after can be used to insert some content following the end of the current tag. In other words you add a class to the current div and style it as follows:-

div.clear:after { content:".";display:block;width:0;height:0;clear:both; }
- this inserts a period "." outside the div, hides it by giving it a width and height of zero, and then clears it.

The most important thing to remember when floating divs, is to ensure that each div is given a width, and that the sum of the widths (plus borders) is less than or equal to the width of any containing div. Failure to comply with this rule will result in the last floated div being 'pushed down' and the page layout will be broken.

However, as usual Internet Explorer 7 and earlier versions have some issues that need attention. They can all be fixed and your content will display pixel perfect in any of the IE browsers back to and including IE5.01 provided the following CSS is applied - separately by using IE only Conditional Comments.

The three example divs are each made up of 3 divs that are all floated to the left. Refer to the float-all.css file and you will find the CSS for each of the divs has display:inline; to keep IE6 and earlier versions from breaking. So, what is the problem? Well in IE6 and earlier, if a box is floated and has a margin on the same side as the float direction, then Internet Explorer mysteriously doubles the size of the declared margin and the floated box(es) will no longer fit into their prescribed space. The cure described has no ill affect in the other browsers.

IE7 has another problem; it fails to understand where the bottom border should go, and needs a little prompt in each of the divs to add padding on the bottom, e.g.

div#boxOne, div#boxTwo, div#boxThree { padding-bottom:5px; }
- which you will find in the file float-ie7.css .

IE5.x browsers have the 'box model' problem, where the width includes any padding and borders. In the examples given, there is no padding but the width of each of the borders must be added to the width declared in the CSS. This is done in the file float-ie5x.css .

Changing the subject slightly. There is a very long word in the left-hand div of the middle box. It's made up of multiple strings of the keyboard character set (qwerty...) and is wrapped neatly into the div using the generic monospace font and the CSS:-

div#boxTwo p.word { font-family:monospace;font-size:normal;line-height:14px; margin:-2px 0px 0px 0px;word-wrap:break-word; }
- this attribute was developed by MSIE around 1999 and has now been adopted by W3C in the currently not finalised CSS3. At the time of writing it hasn't yet been implemented in Opera 10.10 and is not recognised by IE versions earlier than IE5.5.

To ensure IE7 back to IE5 get the corrections they need, place the links to the appropriate CSS files in the head of the page inside Conditional Comments as follows:-





- and this ensures that only those browsers that recognise their particular IE only Conditional Comment will get to have the appropriate CSS file served to them.

- 28 November 2009