Member Avatar for narendrakiit 
<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;}
div-space.jpg 8.41 KB div-space.jpg 8.41 KB
Edited by diafol because: wrong forum
  • 3 Contributors
  • 2 Replies
  • 182 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by Lau_1
Member Avatar for diafol

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.

Member Avatar for Lau_1

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
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.