CODEWITHSUNDEEP
css
olz0508
olz0508

Reputation: 23

"Chaining" blocks of different heights with display:inline-block

To illustrate my problem : http://jsfiddle.net/89bnF/762/

I'm using a 2 column layout with blocks having different heights :

.thumbBlock {
     display: inline-block;
     background-color: #efbf53;
     width: 45%;
     padding: 10px;
     margin: 5px;
     vertical-align: top;
     border: 1px solid #aaa;
 }

I'd like the n°3 block to be just under the n°1 block, on the left of n°2 block (not having the white gap due to block n°2 being higher). Is this possible with inline-block? And if not, what should I use, knowing that the result has to be "responsive-compatible" ? (i didn't include the media queries part in the example)

Thanks for your help!

Olz

Upvotes: 2

Views: 1786

Answers (1)

j08691
j08691

Reputation: 207901

You'll either need JavaScript to position the divs as you want (see the masonry project), or a containing div around the divs you have, and then some floating to get the desired effect:

jsFiddle example

CSS

.l {
    float:left;
    clear:left;
}
.r {
    float:right;
    clear:right;
}

HTML

<div id="container">
    <div class="thumbBlock l">Bla Bla1
        <br />Bla Bla1</div>
    <div class="thumbBlock r">Bla Bla2
        <br />Bla Bla2
        <br />Bla Bla2
        <br />Bla Bla
        <br />Bla Bla
        <br />Bla Bla
        <br />Bla Bla
        <br />Bla Bla</div>
    <div class="thumbBlock l">Bla Bla3
        <br />Bla Bla3
        <br />Bla Bla3</div>
    <div class="thumbBlock r">Bla Bla4 Bla Bla4
        <br />Bla Bla4
        <br />Bla Bla4
        <br />Bla Bla4</div>
</div>

Upvotes: 3

Related Questions