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

Answer 1

The best solution I have found for this issue is to tag each post with the class .odd and .even or .left and .right then simply float left the odd/left posts and float right the even/right posts. Note that this only works visually if the widths of the posts add up to the width of their container. Then to make this work on a variety of screen sizes simply add an @media query to change the float on the even/right posts to be left on screens smaller than the width of the dual column container.

Answer 2

I recommend that you divide the content into two columns:

HTML:

<div style="margin-left:-10px">
    <div class="column">
        <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 latest videos
        </div>
    </div>
    <div class="column">
        <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>
</div>

and in your CSS add:

.column{float:left; width:50%;}

UPDATE: the boxes inside the columns don't need to be floated if you use this solution

Answer 3

You can try with this code

#bottom{
    width: ???px;
    height: ???px;
    background-color: black;
}
#top{
    width:???px;
    height:???px;
    background-color:red;
    z-index: 999;
}


<div id="bottom">
    <div>......</div>
  <div id="top">......</div>
</div>

Answer 4

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".

Answer 5

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.