CSS stacking div with variable height on two columns

Question

So I'm working the profile page of a user on my website. And I'm having a little problem with the CSS.

My problem is the following: I have four div boxes with a fixed width but with variable heights and I would like them to stack one on top of an other.

The picture bellow is a screenshot of my issue, the div with the title "Latest videos" should be glued to the one with the "basic info" title. Like "contact info" and "Latest photo" are.

My html looks something like this :

<div style="margin-left:-10px">
    <div class="infoBox" style="width:360px;  margin-left:9px">
        Content goes here for basic info
    </div>
    <div class="infoBox" style="width:360px;  margin-left:9px">
        Content goes here for contact info
    </div>
    <div class="infoBox" style="width:360px;  margin-left:9px">
        Content goes here for latest photos
    </div>
    <div class="infoBox" style="width:360px;  margin-left:9px">
        Content goes here for latest videos
    </div>
</div>

The CSS class for info box looks like this :

.infoBox {
    width: 100%;
    margin: -1px; 
    background-color:#37312d;
    padding:5px;
    border:#5b504a solid 1px;
    margin-bottom:9px;
    float:left;
}

How can I do to make this work ?

Answer 1

Short of nesting your divs in columns:

<div class="left-column">
    <div class="infoBox">...</div>
    <div class="infoBox">...</div>
</div>
<div class="right-column">
    <div class="infoBox">...</div>
    <div class="infoBox">...</div>
</div>

you could try jQuery Masonry. Here's a fiddle demonstrating its use.

Answer 2

You can put the boxes in columns like so. This is a very basic grid system, but it shows the basic idea: you're stacking your boxes inside of wrapper divs which form columns.

If you'll be repeating this pattern all over your site, you may want to use a more formalized grid system. Many examples can be found by simply searching "css grid system".