This is a very useful CSS trick that I learned recently. Thought some of you might need it someday as we all know how valuable the clear spaces are sometimes in web page layouts.
Clear Space Option 1
<div class="spacer"> </div>
div.spacer{
clear: both;
}
This should work, and as DIV has no intrinsic height you can style it to
have as much or as little vertical space as you like. But,
IE5 and IE6 have several nasty bugs that can appear when a DIV is used
to clear floats. They appear only if various conditions are met, so
they may or may not occur on your page.
Clear Space Option 2
br{
clear: both;
}
This is safe and reliable, but BR also carries some default
behaviour of a certain amount of vertical space that you cannot alter.
You can always create classes of BR's, and each could behave differently.
From thread: "Clearing space beneath floated elements," April 2002.
Clear Space Option 3
hr.clearing {
display: block;
clear: both;
visibility: hidden;
height: 0;
border-width: 0;
margin: 0;
padding: 0;
}
This method reduceds the vertical space to a minimum.
Long live
CSS_________________
“You might say reality is the result of complex negotiations between the observer and the observed. But that is simply a point of view…”
Digital Bangladesh
