Traditionally I've used divs or spans as a 'cleaner' element to clear the floats above it. I don't know where I learned this common trick, but for as long as I can remember now I've used the cleaner class and some empty divs round around the form to try correct line breaks and the form layout.
Completely randomely I tried something different today. I used a line break element as my cleaner. omg - Why have I never done this before? Now my line breaks act as line breaks when
CSS fails, and then they act as cleaners with CSS enabled. So far its been too good to be true,.. literally; I'm waiting to see why I haven't seen this elsewhere - Waiting to see where it breaks.
Here's a demo of what my cleaners now look like:
<style>
br {
display: none;
}
.cln {
display: block;
clear: both;
}
</style>
... blah blah fish paste ...
<div>My floated left element</div>
<div>My floated right element</div>
<br class="cln" />
<div>The rest of my content</div>
Some last notes:
I hide all line breaks by default because they are really there only for graceful degradation. If the client has CSS enabled then I don't want extra line breaks mucking up my presentation. On the other hand, when CSS is enabled then the linebreaks with the 'cln' class will be displayed and, simply put, line break over the above floated elements.
