CSS Forum

**!dahan!** · 07-15-2009, 11:05 PM

My following question maybe basic for many but it
seems i do not know how to work with the "clear" property.
I expected the following code to place the box "This is "first"div"
at the right-top corner of my page and the other box:
"this is "second" div" at its' left side and beneath the "first" box.

Code:
<title>Learn How to clear</title><style type="text/css"> div.second { border:3px solid #ff9900; width:120px; float: left; } div.first { border:3px solid #FF00FF; width:120px; float:right; clear:left; }</style></head><body><div class="first">This is "first"div</div><div class="second">This is "second" div </div>
Evantualy, "first" was placed at the top right corner of that page
and "second" at the top left corner but at the same row !

Can anyone explain me why "first" remains at the same row with "second"
Despite "clear:left" was assigned to it ?
Thanks a lot

**racer x** · 07-16-2009, 12:22 AM

They are both be on the same line because there is no clearing done in between those two divs to reset the normal flow of the document.

When I was learning css and floats I made nice bold colors for backgrounds and moved stuff around on the page. It really helped to "see" where the boundaries of things with padding and margins actually were as opposed to some white text on a white page.

Try adding <div class="clear"></div> between those and in css .clear {clear:both;}

http://css-tricks.com/all-about-floats/