# CSS clearing an entire row

**URL:** <https://forum.kirupa.com/t/css-clearing-an-entire-row/268637>\
**Category:** web dev\
**Created:** [August 16, 2008, 10:55am UTC](https://forum.kirupa.com/t/css-clearing-an-entire-row/268637 "2008-08-16T10:55:52Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tanel96](https://avatars.discourse-cdn.com/v4/letter/t/5fc32e/32.png) [@tanel96](https://forum.kirupa.com/u/tanel96)\
**Post date:** [August 16, 2008, 10:55am UTC](https://forum.kirupa.com/t/css-clearing-an-entire-row/268637/1 "2008-08-16T10:55:52Z")

</div>

I uploaded a small test page: [http://fritz.planet.ee/test.html](http://fritz.planet.ee/test.html)

```auto

<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.
