0

can you please help me with some css magic.

I am trying to achieve a flixable multi column layout. something like this http://masonry.desandro.com/demos/basic-multi-column.html can I achive this with Blueprint and no javascript.

the thing with blueprint now is that is added lots of white space (see attachment)

enter image description here

Abdulaziz Alsubaie
  • 710
  • 2
  • 8
  • 17
  • You can easily get a masonry-like layout with CSS3's `column` property, the only drawback is that its only supported in IE10+ and all the other good browsers so don't know if thats a drawback. Is that limitation ok with you? – Andres I Perez Apr 24 '12 at 14:03

1 Answers1

0

Following is just sample one.. You just change width/height according to your requirement. Hope this helps.

CSS 
----
.content {
    float: left;
    display: block;
    width: 1000px;
    background: red;
}

.sub-content {
    float:left;
    width: 200px; 
    background: blue;
    margin: 10px;
}

Sample HTML
-----------
<div class="content">
<div class="sub-content" style="width: 500px; height: 300px;">
    DIV 1
</div>

<div class="sub-content" style="width: 200px; height: 100px;">
    DIV 2
</div>

<div class="sub-content" style="width: 500px; height: 300px;">
    DIV 3
</div>

<div class="sub-content" style="width: 250px; height: 300px;">
    DIV 4
</div>
</div>
Aung Thaw Aye
  • 437
  • 3
  • 7
  • thanks, but this does not fix my issue. in your example I need DIV4 to be directly under DIV 2. if I swap DIV 4 with DIV 3 it got fixed but now DIV 3 should be directly under DIV 1. thanks in advance. – Abdulaziz Alsubaie Apr 18 '12 at 16:27
  • if you want to do so, you will surely need javascript to draw these div tags with top/left positions. CSS alone may not be able to do it. – Aung Thaw Aye Apr 19 '12 at 03:14