Ok so I have been doing some research on the internet over the last couple of weeks after LadynRed and Chrishirst corrected some of my css mistakes. I think I am starting to understand clearing a little bit more but I think I am still waiting for that light to go off in the back of my head.

Does anyone have a favourite tutorial that I read on the net that explains it really well?

Basically from what I have now, you add a dummie <div> that clears a float after the container that was floated. This is done to either force a div to expand so that it encompasses block objects like images or other <div>s or clear to one side if you want to force a new line.

How wrong am I and what am I missing? I feel like I need some <div> theory!

That's pretty close. Floats actually exist in a different "plane" in the parent container so only affect the content of the parent NOT the parent itself.
It's one of these odd things to imagine, where a "flat" document is actually a 3 dimensional object, with elements that can be "stacked" and ones that can float to the top of the stack.


http://css.maxdesign.com.au/floatutorial/

or Eric Meyer from Cascading Style Sheets: The Definitive Guide at Google Books

Actually, adding an extra div just to clear a float is not the best semantic method.
Putting overflow:auto on the parent container will clear the floats inside it, as will floating the parent container itself.

Putting overflow on the parent container will clear the floats inside it, as will floating the parent container itself.

Everytime you post something I learn more. Would you like to come slightly North for a week or so and hang out around here? I will feed you fairly well and pick your brain.

lol... I suppose I could spend a weekend in L'ville

Where the heck did that car come from in the quote?

Worse that Lville it is Ltown the horse crapital of the world and that spelling was intentional.

the car emoticon is : + auto. It's a real pain when posting CSS code.

either put a space in or check the "Disable smilies in text"