Understanding floats, relatives and flow

Note: black bordered boxes are relative divs surrounding the examples.

Note: the numbers 1,2,3 are the order the divs come in the html. None of the numbered divs are nested.

Example 1

1. I'm a relative
2. I'm a relative too, and I sit 'in the flow' underneath 1 above
Toggle HTML

Example 2

1. I'm a relative
2. I'm a float:left, and I sit underneath (1) just like the example above,
but notice how I'm not in the flow, and so the black bordered div 'ignores' my presence.
Toggle HTML

Example 3

Now here's the crucial point. Let's add a relative after the green float above. Where does it go? Try to think of the answer before you scroll down!

Did you say, 'it goes in the same place as the grey div in 'example 1'. If so give yourself a pat on the back. Don't believe that? Let's try.

1. I'm a relative
2. I'm a float with a small margin. My HTML is NOT inside the red div.
3. I'm a relative too with a red border. Notice how I sit right under the pink div ignoring the presence of the green float. However, my content cannot be in the float and hence flows to the right of it, and ultimately beneath it.
Toggle HTML

Example 4

Now let's look again at example 2 and add a second float: left. Where does it go?

Remember that a float will essentially go into the same position as a relative would. So there it goes! But there's already a float there, so by the axiom go as high as possible first, as left as possible next, we get this:

1. I'm a relative
2. I'm a float:left
3. And I'm another float:left
Toggle HTML

Example 5

At this point, the question arises, "If a following Relative ignores those 2 Floats, how would I put something under the 2 green floats? The trick is to make a following Relative clear:both. This essentially tells the relative, "put me in a place where I can touch both sides without 'touching' anything else". Like this:

1. I'm a relative
2. I'm a float:left
3. And I'm another float:left
4. I'm clear:both, so I'm forced under the 2 floats, and pull the black border down with me.
Toggle HTML

Example 6

And from this we can see how to do the classic 2 column plus footer layout. The red line is clear: both, and in reality we'd make it height: 0, so it would be invisible.

LOGO
COL1
COL2
footer
Toggle HTML (not dotted border representing screen).

Example 7

3 Columns?? Easy now. Just look at Example 6 and throw 2 floats inside the float 2. This does have a problem in that you have a holding DIV that has no semantic meaning (the blue one) but, hey, I'm just the messenger, and that's the best we can't do right now IMO. Note when you look at the HTML how this has also let's us put the centre column first. Good for Google!

LOGO
COL2
COL3
COL1
footer
Toggle HTML (not dotted border representing screen).

Finally,

We have the problem of those floats' backgrounds. They don't extend down to the footer. What to do? The cool trick is to give the holding (black) div in Example 6, a background image that looks like this:
++++---------------------------
++++---------------------------
with the ++++ representing green say, and ------- representing blue, with this CSS:

background-image: url(/pics/faux-columns);
background-repeat: repeat-y;

Running out of time here, so just go to http://www.simplebits.com to find out more about that.

See it in action at http://www.j-talk.com/

Final, final

I've just thrown this up in a quiet 30 minutes on a Friday afternoon, so it has no design and no doubt it could be better, but if you have suggestions go to http://www.j-talk.com/gary/, and put a message on the message board.

Gary