When two elements are floated in a div, chances are parent element no longer contains it because the float is removed from the flow. Here I am sharing five quick tips to fix this problem.
Remind the containing block to wrap its children using the overflow property. Example code where #inner is floated:
Set the outer's style to:
In the CSS:
No non-semantic XHTML. Just some clever CSS rules.
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. Also, Gecko does not render empty divs, so this will not always work. Sticking a non-breaking space in there, or a comment, may help, but not always.
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.
The following are good styles to apply to a br or div element to make it take up no space when clearing:
This solution creates a new block formatting context in all browsers which should assure a similar display across the board.
Do you have any opinion, leave a comment.