Tutorial 21: CSS Floats, Part II
|
| ||||
| ||||
|
|
Coming down to Earth
As you can see, Mozilla and Internet Explorer handle this perfectly (well, not exactly, there is a tiny and not exactly noticeable problem with IE5 - can you spot it?). The problem comes when we load this page in Internet Explorer 4.0 or Navigator 4.0.
Multi-column layout using floats on Navigator 4.0. Houston, we have a problem. [Full-sized image]
Multi-column layout using floats on Internet Explorer 4.0. Downright weird. [Full-sized image]
Navigator, when given a margin for main, will put the float all the way outside this margin. We have two columns alright, but that big wodge of blank space between them is not exactly what I had in mind. This can be worked around, but not easily, and not without breaking the spec in the process.
IE4, on the other hand, does something even more mysterious. It applies the margin to the inline content, creating a very, very ugly result, as you can see in the image above.
So why bother?
These bugs are pretty serious, and as far as I know no amount of fiddling will get this layout to work with Netscape 4.0 and Internet Explorer 4.0. So, until these browsers are a distant memory we can safely phase out of the subconscious of the Web, it is not to be applied on anything but a controlled environment. But why bother with this technique in the first place when we have the technique we discussed in Tutorial 19?
Well, as I mentioned then, using positioning for columns can be a problem, especially since you can't use percentage units for the widths of the columns - Occasionally, the content that follows the multiple columns might overlap one of the columns, creating an ugly and unreadable effect. This can never happen with floats, as text and floats will never overlap. And besides, the clear property can be used (as above, where it is set to left for the footer element) to make sure any subsequent elements are moved down out of the way of the columns.
