Make multiple variable-height divs inline, yet maintain a fixed width container

Here's the sketch: http://jsfiddle.net/jondum/efVjj/20/

The goal is to have each of those divs on the same line.

If I add a fixed height to each of them it would appear to work, but I would like to avoid setting an开发者_运维百科 explicit height on each element.

So how do I get those buggers all on the same line?

---

If you want to have them on one line horizontally, you can try to use display: inline-block with white-space: nowrap on a parent, so the blocks would be on one line: http://jsfiddle.net/kizu/efVjj/26/

---

You've set the width of the parent container at 400px and the three child divs each at 400px. 400 x 3 = 1200. Set the width of the parent container to at least the size of its child elements.

.main-container
{
    width: 1200px;
} 

---

One option is to use absolute positioning.

`

<div class="element" style="background:blue;position:absolute;left:0px;">


    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

</div>

<div class="element" style="background:green;position:absolute;left:400px;">

  <br/><br/><br/><br/><br/><br/><br/><br/>

</div>

<div class="element" style="background:red;position:absolute;left:800px;">

    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

</div>

.main-container
{
    width: 1200px;
    overflow:hidden;
} 

.element {
    float:left;
    width: 400px;
}