5
<style>
.cl {clear:both;}
.block {}
.left {float:left;}
</style>

<div class="block">
   <div class="left">Title 1</div>
   <div class="left">Value 1</div>
   <div class="cl"></div>
</div>
<div class="block">
   <div class="left">Title 2</div>
   <div class="left">Value 2</div>
   <div class="cl"></div>
</div>

Is it possible to avoid adding <div class="cl"></div> at the end of each .block?

Kirzilla
  • 16,368
  • 26
  • 84
  • 129
  • Have you tried using something like `.block:after { clear: both }`? I've never tried using the before or after selectors so I don't know how they work. – animuson Sep 07 '11 at 15:12

4 Answers4

5

There are two common solutions to this problem.

  1. Add overflow: hidden to the parent of the floated elements (so in this case, .block).
  2. Use "clearfix": http://nicolasgallagher.com/micro-clearfix-hack/

Some more information here: Is clearfix deprecated?

A good time to use clear: both is when you already have an element available to add it to.

For instance, the common case of floated columns with a footer: http://jsfiddle.net/thirtydot/vhBkM/

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • +1: Use `overflow: hidden` to force floats to stay inside a block element. `clear` is the wrong tool for the job. – Søren Løvborg Sep 07 '11 at 15:19
  • @Søren Løvborg why is `clear` wrong for the job? genuine question for learning experience. – Eonasdan Sep 07 '11 at 15:21
  • @Eonasdan: It works, but there are cleaner alternatives. `overflow: hidden` involves adding only.. `overflow: hidden` to the CSS, which is cleaner than adding an extra element in the HTML for the sole purpose of clearing floats. Whereas clearfix involves adding only an extra class in the HTML, which is also cleaner than adding an extra element. – thirtydot Sep 07 '11 at 15:24
  • ah. I can't believe I climbed the mountain to only to find the sage was on his computer posting to SO – Eonasdan Sep 07 '11 at 15:27
  • `clear` is really meant for use on elements like `h1`, e.g. to get floating figures out of the way before a new chapter in a longer text. `overflow: hidden` explicitly says "I want the floats to stay inside this box". `clear` can also cause problems if you have additionally floated elements (e.g. a menu), and although there are workarounds, `overflow: hidden` gives you much better control over the result. – Søren Løvborg Sep 07 '11 at 15:35
1

you could do this:

<style>
    br {clear:both;}
</style>
<div class="block">
    <div class="left">Title 2</div>
    <div class="left">Value 2</div>
</div>
<br/>

a second option re: @animuson comment

<style>
    .container br {clear:both;}
</style>
<div class="container">
   <div class="block">
       <div class="left">Title 2</div>
       <div class="left">Value 2</div>
   </div>
   <br/>
</div>
Eonasdan
  • 7,563
  • 8
  • 55
  • 82
  • 1
    You really should use a class name for the break though, so it doesn't apply to *all* breaks in your document. But if you do that, it's not really any different than the OP's example. – animuson Sep 07 '11 at 15:16
  • yeah that's why I did it at the element level – Eonasdan Sep 07 '11 at 15:17
1

You shouldn't need the <div class="cl"></div> divs at all. Just put the clear: both on the block div.

Example: http://jsfiddle.net/mKazr/

CSS

.block {
    clear: both;
    overflow: hidden; /* If you want to make the div size to the contents and not collapse use this line (from thirtydot answer) */
} 
.left { float:left; }

HTML

<div class="block">
   <div class="left">Title 1</div>
   <div class="left">Value 1</div>
</div>
<div class="block">
   <div class="left">Title 2</div>
   <div class="left">Value 2</div>
</div>

Edit: added code

Michael
  • 763
  • 3
  • 5
0

Try using overflow:hidden on the .block I know that that sometimes will fix it.

brenjt
  • 15,997
  • 13
  • 77
  • 118