a common problem with when trying to box 2 floating elements, you see a zero-height box align to the top of the floating element.

eg, we have the following layout:

Code:

and the following css:

CSS:

usually the problem can be easily fixed by adding an element clearing both immediately after the container block. so the html code now looks like:

Code:

note extra coded added at line 5.

i don't usually box the elements, so i usually don't remember to add this clear element after the container. however if i suddenly decided to change the site layout and want to add border or background color, the site looks awful! then there are countless effort trying to change the html code.

recently i found a solution that can be easily fixed with modifying css of the container by adding width and overflow properties:

CSS:

note for IE (6?) - 'width: 100%;' is a must. without it, the boxes will float everywhere, tested with IE6. box elements still show up correctly in firefox with or without specifying the width.