Question

There are blocks named a,b,c,d inside a bigger fixed-width two-column block.

I want d left to c and below a, it is possible to complete it using pure CSS?

What I have tried,

CSS:

.wrapper {
    border: 1px dotted #111;
    width: 360px;
    padding: 20px;
    float: left;
}

.rectangle {
    display: inline-block;
    float: left;
    border: 1px solid #333;
    min-height: 100px;
    width: 178px;
}

#a {
    height: 248px;
}

#b {
    height: 148px;
}

#c {
    height: 198px;
}

#d {
    height: 98px;
}

HTML:

<div class="wrapper">
<div id="a" class="rectangle">a</div>
<div id="b" class="rectangle">b</div>
<div id="c" class="rectangle">c</div>
<div id="d" class="rectangle">d</div>
</div>​

http://jsfiddle.net/imom0/E7GYR/1/

To keep it simple, I prefer not to use JavaScript or masonry.

Answer 1

You can use the column-count CSS property like this:

.wrapper {
    border: 1px dotted #111;
    width: 460px;
    padding: 20px;
    float: left;
    column-count:2;
}

.rectangle {
    display: inline-block;
    border: 1px solid #333;
    min-height: 100px;
    width: 170px; 
}

and restructure your HTML to:

<div class="wrapper">
<div id="a" class="rectangle">a</div>
<div id="d" class="rectangle">d</div>
<div id="b" class="rectangle">b</div>
<div id="c" class="rectangle">c</div>
</div>

column-count is supported with the respective vendor prefixes by most browsers. See caniuse for more infos.

An example fiddle can be found here.