Css display coherent divs block

Question

I would like to have blocks of various height displaying this way:

enter image description here

with the code

<div id="content">
    <div class="test" >  1<br/>1<br/>1  </div>
    <div class="test" >  2   </div>
    <div class="test" >  3<br/>3<br/>3<br/>3  </div>
    <div class="test" >  4  </div>
    <div class="test" >  5  </div>
    <div class="test" >  6<br/>6  </div>
    <div class="test" >  7  </div>
    <div class="test" >  8  </div>
</div>

The only result I have is this one:

enter image description here

while doing

 float: left;

Any clue how I can achieve this without using two columns in the html?

I have a fiddle : http://jsfiddle.net/agA8Q/8/

You will need http://masonry.desandro.com/ – Mr. Alien Dec 18 '13 at 10:18 — Mr. Alien, Dec 18 '13 at 10:18

score 2 · Answer 1 · answered Dec 18 '13 at 10:20

I'd put the two columns in seperate floated DIVs:

<div id="content1" class="content">
    <div class="test" id ="1">1<br/>1<br/>1</div>
    <div class="test" id ="4">4</div>
    <div class="test" id ="5">5</div>
    <div class="test" id ="6">6<br/>6</div>
</div>
<div id="content2" class="content">
    <div class="test" id ="2">2</div>
    <div class="test" id ="3">3<br/>3<br/>3<br/>3</div>
    <div class="test" id ="7">7</div>
    <div class="test" id ="8">8</div>
</div>

.content{
    width:100px;
    float:left;
}

.test {
    margin: 5px;
    width: 90px;
    background-color: #666;

}

http://jsfiddle.net/5bSwH/

score 0 · Answer 2 · answered Dec 18 '13 at 10:21

Try this: http://jsfiddle.net/agA8Q/9/

It means adjusting your html somewhat:

<div id="content">
<div class="col">
    <div class="test" id ="2">2</div>
    <div class="test" id ="3">3<br/>3<br/>3<br/>3</div>
    <div class="test" id ="7">7</div>
    <div class="test" id ="8">8</div>
</div>
<div class="col">
    <div class="test" id ="1">1<br/>1<br/>1</div>
    <div class="test" id ="4">4</div>
    <div class="test" id ="5">5</div>
    <div class="test" id ="6">6<br/>6</div>
</div>
</div>

score 0 · Answer 3 · answered Dec 18 '13 at 10:24

You can tr this approach.

http://jsfiddle.net/FTDse/

<div id="content_left">
    <div class="test" id="1">1
        <br/>1
        <br/>1</div>
    <div class="test" id="2">2</div>
    <div class="test" id="4">4</div>
    <div class="test" id="5">5</div>
    <div class="test" id="6">6
        <br/>6</div>
</div>
<div id="content_right">
    <div class="test" id="2">2</div>
    <div class="test" id="3">3
        <br/>3
        <br/>3
        <br/>3</div>
    <div class="test" id="7">7</div>
    <div class="test" id="8">8</div>
</div>

#content_left {
    float:left;
    width: 100px;
}
#content_right {
    float:left;
    width: 100px;
}
.test {
    margin: 5px;
    width: 90px;
    background-color: #666;
}

Css display coherent divs block

3 Answers3