16

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?

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

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>

2 Answers 2

40

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>

2
  • Thanks, works well. Sometimes we are forced to use pages with quirks mode, so here's a fix for IE7 Standards and all IE quirks mode: "zoom:1; *display:inline; vertical-align:top;"
    – Fergal
    Nov 1, 2011 at 11:21
  • Updated example with fix for future generations. :) Nov 1, 2011 at 11:27
0

Wrap all divs with a container and give .container { overflow: hidden; } or .container { overflow: auto } to it. The second way is wrap all divs with a container and put another div to bottom of all divs and give a class name such example"clear" and style it .clear { clear: both }

1
  • Doesn't work, changing the overflow creates one column of divs and wraping them all and placing a clearing div at the bottom makes no difference to the defualt behaviour.
    – Fergal
    Oct 30, 2011 at 21:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.