Step 11 should be: If you don't have an element to clear out the bottom, you can get limited functionality by applying
overflow: hidden
to the containing element. In most cases this will cause it to extend and prevent the inner elements from bleeding out. In some edge cases it will cause them to be hidden, though.
There is one case in which I don't know how to do away without extraneous presentation divs: I want a 2-columns layout where the left column is written after the right column in my source code. Good for my eye (navigation on the left) and for search engines and text based browsers (relevant text first).
Right now, my div structure looks like this:
<body>
<header />
<div-hackw>
<div-hack1>
<div-hack2> <article /> </div-hack2>
<nav /> -- written after, displayed on the left
<div-hackw>
<footer />
<body>
Header, footer, nav, and article are okay (they eventually will be actual html5 tags). Hakcw, hack1 and hack2, however, are ugly. Does anyone know of a way to ditch them ?
This layout is source ordered (header article nav aside footer), liquid, and the side columns have a fixed width. You can easily do the same thing with 2 columns only. The only drawback left is the fact that I can't force the columns to share the same height. As far as compatibility is concerned, I think an html 4.1 version will work on any relevant browser. So I think I found my ultimate layout. At last.
