0
<div class="container">
    <div class="Div1"></div>
    <div class="Div2"></div>
    <div class="Div3"></div>
    <div class="Div4"></div>
</div>

.container{
    position:relative; display:block; float:left; width:100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;}

.div1{width:33%; height:auto; position:relative; display:block; float:left;}
.div2{width:33%; height:auto; position:relative; display:block; float:left;}
.div3{width:33%; height:auto; position:relative; display:block; float:left;}
.div4{width:33%; height:auto; position:relative; display:block; float:left;}

Edited by diafol: wrong forum

Attachments div-space.jpg 8.41 KB div-space.jpg 8.41 KB
3
Contributors
2
Replies
23
Views
2 Years
Discussion Span
Last Post by Lau_1
0

This would be difficult without js, even with CSS3. You can do it with to an extent with inline-block as display as use columns, but the results aren't always what you'd expect, as they don't go div1->4 in order - with your current heights, you'd probably get div2 dropping directly below div1 (no gap). Have a look at Masonry - http://masonry.desandro.com/ it may help.

0

seem like the size of div4 is high, and if move to below the div 1, overall height is not equivalent.

To move the div 4 under div 1, using

display: inline;

and the size of div 1 and div 4 should change, it should be display in this way div 1-> div 4-> div 2 -> div 3

Edited by Lau_1

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.