clear:both - please explain...
Posted: Fri May 02, 2008 4:25 am
Hi,
I had a following simple html code:
But it didn't work, even though I think I've done this about a hundred times before. The container (with green border) is above the nested div.
I tried adding div style="clear:both"... just after the left-floating div but it didn't work either.
After trial and error, adding br style="clear:both" finally worked:
But can somebody explain me why? Why do we actually need to add this "clear:both" stuff, and why it has to be on "br" tag? Maybe there is somewhere a good article about divs? It looks like I completely don't understand them. I thought that whatever I will put in the "container" div, this container will expand to the contents, whatever the contents will be. Now it seems I have to add some strange stuff...
p.s. I have another code where div style="clear:both" works fine and does the job - why in this particular case I need to use br style="clear both". I would love to finally understand the way divs work...
I had a following simple html code:
Code: Select all
<div style="width:100%;border:1px solid green;">
<div style="float:left;border:solid 1px blue"> on the left </div>
</div>
I tried adding div style="clear:both"... just after the left-floating div but it didn't work either.
After trial and error, adding br style="clear:both" finally worked:
Code: Select all
<div style="width:100%;border:1px solid green;">
<div style="float:left;border:solid 1px blue"> on the left </div>
<br style="clear:both" />
</div>
p.s. I have another code where div style="clear:both" works fine and does the job - why in this particular case I need to use br style="clear both". I would love to finally understand the way divs work...