Float css problem, solved with overflow: auto

The problem with the “float” css option is that your “divs” will have their height broken when you use it.

overflow-option-css

Let’s say that you have this code:

< div class="top" >

< div class="1" >
text
< /div >
< div class="2" >
text
< /div >

< /div >

If you give “float=left;” to both class “1” and “2” and you put a border = “1” for class “top”, it will result something like a broken table. And the problem will be the “height”.

To get rid of the problem, add “overflow: auto;” on the “top” css lines.

“clear:both” isn’t working.

This method works for Mozilla Firefox and Chrome.

ADD A COMMENT: