Posted under CSS
Permalink
Tags CSS, Float, HTML, Tutorial, Web
The following sites give a good introduction and insight into the use of floats and some of their quirks for the unwary.
This Excellent introductory float tutorial from Max Design is well worth working through entirely as a starter for beginners.
This article from CSS Newbie details some of the quirks of floats and how content flows around floated elements, and how container height is affected. There is a fundamental point which the article illustrates, but which I could not find spelled out clearly and obviously in other articles anywhere. When other elements flow around a floated one, it is the content area of their CSS boxes which flow. It is therefore perfectly possible (and normal) for the floated element to end up sitting inside the margin, border and padding areas of the elements which float around it. The article also describes how the floated element can overlap (extend beyond) the border of the flowing element if for example the floated element is longer. This is not what you might expect. However, when the flowing element is itself floating, then the height of the (inner) floating element dictates the height of the flowing element.
The ‘flowing of content area’ behaviour is used when designing multi column layouts, as this article from Comunity MX illustrates. For example in a 2 column layout, the left column content is placed in a ‘float: left’ div. The adjacent right colum flows around it, and has a left margin set to the width of the left column plus any desired gap.
This article by Matthew James Taylor describes a template for a 3 column floating layout with header and footer. The interesting thing about this is that Matthew does not use any CSS hacks or browser specific coding, but manages to achieve wide cross browser compatibility. He also has a number of other templates, all freely available, an addition to an interesting article on how to acheive equal height column backgrounds, again by nesting floating column divs inside other divs which are also floating.