PDA

View Full Version : CSS clearing an entire row


tanel96
August 16th, 2008, 06:55 AM
I uploaded a small test page: http://fritz.planet.ee/test.html



<html>
<head>
<title>Test page</title>
<style type="text/css">
.container{
float:left;
margin-right:10px;
width:90px;
background-color:#FFCC33;
margin-bottom:10px;
}
</style>
</head>
<body>
<div style="width:300px; background-color:#CCCC66; overflow:hidden;">
<div class="container">first<br />first</div>
<div class="container">second<br />second<br />second</div>
<div class="container">third</div>
<div class="container">fourth</div>
<div class="container">fifth</div>
<div class="container">sixth</div>
<div class="container">seventh</div>
</div>
</body>
</html>


This is unfortunately not the effect i'm aiming for. I would like to achieve something like this:

http://fritz.planet.ee/theWayItShouldBe.gif

Simply applying "clear:both" doesn't help... anyone have ideas how to do this ?

Thanks a lot.
simplistik
August 16th, 2008, 09:03 AM
add a clear class


.clear { height: 1%; margin: 0; padding: 0; clear: both; float: none; }

then after every third item or whatever you want to clear do a


<br class="clear" />

optionally you can add a
clear: left; on every 4th item
tanel96
August 16th, 2008, 10:37 AM
wow... thanks a lot dude... i appreciate it :)
BSM2049
August 19th, 2008, 02:46 AM
Yeah I keep a clear class on me too. Every time I need to bump down stuff I just call <div class="clear_floats"></div>. Be careful where you use clears though. Misplace one or forget one and you can mess up an entire page layout, especially with nested DIVS and self-adjusting columns.

.clear_floats
{
clear: both;
}