I want to remove black space place below Div1 and place div4 below Div1 but

[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;}

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.

[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