Looks like a great little piece of css code. I've wanted to do this for ages.

http://www.webchicklet.com/css/how-to-k … e-another/

Looks like the main things are:

.clear {

clear: both;

}

and

<br class="clear" />

don't forget that the containing element will need a style of

overflow:auto;

so that the floated content pushed the bottom of the parent down

That's something I've been using for a while.  Something to consider with this, the break tag can take up some vertical space depending on where it shows up (it can add an extra line of blank text).  If this happens, and is not an effect you're looking for, you can add "font-size:1px" to the .clear class to reduce it.

Thanks.

the break tag and font-size is not really the correct way of doing it.

It seems that the thought here is the requirement for a clearing element.

However, there is a better way of doing it - by applying the correct styles to the containing element

But this is a bit of a null post as i can't remember what the exact code is.............will update this post when i find it!!!!!!

more help here http://www.w3schools.com/Css/pr_class_clear.asp

"Correct" is a flexible word here.  There are lots of ways of doing lots of things in CSS, whatever's valid and does what you want is pretty much correct.  Are there other ways of doing it?  Sure.  Some are better for a particular situation than others.  But in the end, it's the end result that matters.

My idea of 'correct' is using such styles that extra elements are not required

Adding a break has the desired visual effect - true
Adding a break is not invalid - true

adding a break because it fixed something you didn't do right in the first place??????????????


(I really hope I can back this up by finding the right styles I mentioned above !!!!!!!!! )

Concerning floats, I've found that if you have 2 or more left floated divs in the same line, IE6 does it's own thing by adding extra unwanted and uncalled for spacing to the left margin.  Fortunately this can be fixed by adding the following to the class...

display: inline;