Multi-Column like CSS layout

Question

I'm looking to render a multi-column CSS layout like the one pictured in the link below.

http://i.imgur.com/Fhdyi.png

Here's the kind of syntax I'm looking for...

<div class="container">
  <div id="1">#1</div>
  <div id="2">#2</div>
  <div id="3">#3</div>
     <!-- and so on... -->
</div>

What kind of CSS properties am I looking to apply to these numbered DIVs to get them displaying like this? Height of DIVs is variable but width is fixed.

Many Thanks!

Answer 1

How about separating divs in columns? Something like this:

.container #col1,#col2,#col3,#col4{
float:left;
}
.container #div1,#div2,#div3,#div4,#div5,#div6,#div7{
width:150px;
background:#000;
margin:0 20px 10px 0;
padding:10px;
color:#fff;
}

---

<div class="container">
<div id="col1">
    <div id="div1">#1</div>
    <div id="div2">#2</div>
</div>
<div id="col2">
    <div id="div3">#3</div>
</div>
<div id="col3">
    <div id="div4">#4</div>
    <div id="div5">#5</div>
    <div id="div6">#6</div>
</div>
<div id="col4">
<div id="div7">#7</div>
</div>
</div>

Answer 2

It can't be done well with just CSS, and only with CSS3.

To answer your question as posted, this is an example: http://sickdesigner.com/masonry-css-getting-awesome-with-css3/

div{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
width: 480px; }

div a{
    display: inline-block; /* Display inline-block, and absolutely NO FLOATS! */
    margin-bottom: 20px;
    width: 100%; }

<div>
<a href="#">Whatever stuff you want to put in here.</a>
<a href="#">Whatever stuff you want to put in here.</a>
<a href="#">Whatever stuff you want to put in here.</a>
...and so on and so forth ad nauseum.
</div>

The issue with that is that if you have a lot of items, you'll see the first of each column at the top instead of the first three items.

The jQuery masonry plugin is a much better option for this kind of layout: http://masonry.desandro.com/

There's also a plain JS version, called "vanilla masonry" http://vanilla-masonry.desandro.com/

That way your first items are on the top, it looks better in order.

Answer 3

This is not tested but could it be something like this you are looking for:

#1{
    height:150px;
    width:200px;
    border: 1px, solid, black;
    background-color:black;
    color:white;
    float:left;
}

#2{
    height:200px;
    width:200px;
    border: 1px, solid, black;
    background-color:black;
    color:white;
    float:left;

}

#3{
    height:500px;
    width:200px;
    border: 1px, solid, black;
    background-color:black;
    color:white;
    clear:both;

}

#4{
    height:50px;
    width:200px;
    border: 1px, solid, black;
    background-color:black;
    color:white;
    float:left;
}


#5{
    height:100px;
    width:200px;
    border: 1px, solid, black;
    background-color:black;
    color:white; 
    float:left;

}


#6{
    height:200px;
    width:200px;
    border: 1px, solid, black;
    background-color:black;
    color:white;
    float:left;
}


#7{
    height:500px;
    width:200px;
    border: 1px, solid, black;
    background-color:black;
    color:white;
    clear:left;
}