Fergal Fergal - 1 month ago 12
CSS Question

CSS float, clear a "row" of floating elements

I want to create a "scorecard" grid to output some data. If the data in each div.item is all the same height, then a simple float left on each div.item gives a nice even layout which scales up and down nicely depending on browser size.

If the data however is variable, a different number of lines in each div, then the way elements float gives an uneven and messy output. See code sample below. If you create a page with the below, resize the browser to about 800px wide so that box 1, 2, and 3 create a "row" on top, followed by 4, 5 and 6. How do I get 7 to drop down to the next line so it creates a row along with 8 and 9?

Obviously if you resize the browser so that 4 divs appear in each row, number 9 is the element I want to break down below 5. Is there something obvious I am missing or do I need to use some Javascript to achieve this?

<style>

div.item{
float:left;
width:220px;
background-color:#DBDBDB;
margin:8px;
}

h1, p{
padding:4px;
margin:0;
}

</style>


<div class='item'>
<h1>1</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>

<div class='item'>
<h1>2</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>

<div class='item'>
<h1>3</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>

<div class='item'>
<h1>4</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>

<div class='item'>
<h1>5</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>More Content</p>
<p>More Content</p>
</div>

<div class='item'>
<h1>6</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>

<div class='item'>
<h1>7</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>

<div class='item'>
<h1>8</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>

<div class='item'>
<h1>9</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>

Answer

Change "float: left;" to "display: inline-block; vertical-align: top;" and it will work the way you want.

Example: http://jsfiddle.net/yK9eY/2/

div.item {
    display: inline-block;
    *display: inline;
    width:220px;
    background-color:#DBDBDB;
    margin:8px;
    vertical-align: top;
    zoom: 1; 
}

h1, p {
    padding: 4px;
    margin: 0;
}
<div class='item'>
  <h1>1</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>2</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>3</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>4</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>5</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>More Content</p>
  <p>More Content</p>
</div>

<div class='item'>
  <h1>6</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>7</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>8</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>9</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>