CODEWITHSUNDEEP
htmlcss
user1374796
user1374796

Reputation: 1582

display divs inline-block in 2 columns without vertical gaps

Quite a simple problem, but I can't seem to find a solution (using pure css, I'd like to avoid things like Isotope). I have a 2 column grid, the divs displayed inline-block so they fill the .wrap div, problem is though because the divs have variable heights, there are massive gaps below the divs in the right hand column.

jsFiddle demo: http://jsfiddle.net/neal_fletcher/ntyLg/

HTML:

<div class="wrap">
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
</div>

CSS: 

.wrap {
    position: absolute;
    width: 500px;
    height: auto;
}

.test {
    width: 240px;
    background-color: orange;
    display: inline-block;
    vertical-align: text-top;
    margin-bottom: 5px;
}

.test:nth-child(odd) {
    height: 200px;
}
.test:nth-child(even) {
    height: 100px;
}

Any CSS only solutions to such a problem? Any suggestions would be greatly appreciated!

Upvotes: 2

Views: 6131

Answers (1)

dezman
dezman

Reputation: 19358

As it is you don't actually have two columns, so you need something like this:

<div class="wrap">
    <div class="test"></div>
    <div class="test"></div>
</div>
<div class="wrap">
    <div class="test"></div>
    <div class="test"></div>
</div>

Fiddle

Here is it working with different css

Or you could have a .column class if you wanted:

<div class="wrap">
    <div class="column">
        <div class="test"></div>
        <div class="test"></div>
    </div>
    <div class="column">
        <div class="test"></div>
        <div class="test"></div>
    </div>
</div>

Upvotes: 1

Related Questions