Inline-block elements expanding space below

Question

Creating a page layout using inline-block elements (vertically aligned to the top). The only issue, is that inline-block elements below another set of inline block elements will not fold into open space like floated elements do. It's almost as if it obeys row-like rules. Are there any fixes for this?

Layout example in JSFiddle

CSS

* {
    font-family:helvetica;
    font-size:18px;
}
.container {
    margin:0 auto;
    width:90vp;
}
.main_content {
    background:red;
    display:inline-block;
    vertical-align:top;
    box-sizing:border-box;
    width:76.04%;
    min-height:200px;
}
.content_details {
    background:blue;
    display:inline-block;
    vertical-align:top;
    box-sizing:border-box;
    width:22.39%;
    margin-left:01.56%;
    min-height:250px;
}
.comments {
    background:green;
    display:inline-block;
    vertical-align:top;
    box-sizing:border-box;
    width:76.04%;
    min-height:150px;
}

HTML

<div class="container">
    <div class="main_content">
        <h1>Main Content</h1>
    </div
    ><div class="content_details">
        <h2>Details</h2>
    </div
    ><div class="comments">
        <h2>Comments</h2>
    </div>
</div>

Please note I can change the mark-up to create only two inline-block elements (creating two columns), however I would like to know if there is a fix for 3 separate inline-block elements (like in the JSFiddle example), that way I wouldn't need to add extra mark-up.

Answer 1

Neither floats nor inline-block will do what you want there, unless you wrap each column in its own div. Short of that, there are JavaScript solutions for doing this, such as Masonry. (It involves a lot of positioning, though.)

Answer 2

No there isn't.. Not like you are talking about. You'd have to use:

<div id="col1">
    <div id="maincontent"></div>
    <div id="comments"></div>
</div>
<div id="details"></div>

Then you would have #col1 and #details as inline-block elements.

The whole point of an inline-block is that it is inline (ie on a line with other elements) it isn't acting like a table as you suggested, it's acting like a line of text (as it should) that is wider than it's container and breaking to the next line down.

See here: http://jsfiddle.net/GXmM6/ for a working example

Answer 3

Did I get it right that you wanted the .content_details to be a sidebar? Then I just changed it from display: inline-block to float: right to place .comments seamlessly beneath your .main-content . See http://jsfiddle.net/koivo/7UqqF/ for working example. Think that even works just with display: block ...

* {
    font-family: helvetica;
    color: white; /* added */
    font-size: 18px;
}
.container {
    margin: 0 auto;
    width: 90vp;
}
.main_content {
    background: red;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    width: 76.04%;
    min-height: 200px;
}
.content_details {
    background: blue;
    /* display: inline-block; */
    float: right; /* added */
    vertical-align: top;
    box-sizing: border-box;
    width: 22.39%;
    margin-left: 01.56%;
    min-height: 250px;
}
.comments {
    background: green;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    width: 76.04%;
    min-height: 150px;
}