0

I am having 4 div with various height but all four have the float left option. Here the problem comes that first div height is low compare to the second div while third div comes on the second row it have space between first and second.

enter image description here

.hyper {
    float: left;
    border: 1px solid #CCC;
    text-align: center;
}
<div class="preview">
<div class="hyper" style="height:97.76666px;width:29.90%">0</div>
<div class="hyper" style="height:183.76666pxwidth:69.96%">1</div>
<div class="hyper" style="height:97.76666px;width:29.90%">2</div>
<div class="hyper" style="height:97.76666px;width:69.96%">3</div></div>
Murat Seker
  • 890
  • 2
  • 14
  • 26
Gandhi Selvaraj
  • 25
  • 7

1 Answers1

0

This is the basic behaviour of floating divs and is correct rendering of the page layout.

To "fill" the empty space you need to create a container div, which will act like a "column" and contain both the third and the first divs. Don't forget to add css property box-sizing: border-box; so that the width and height calculations for the borderless div are the same as for the divs with borders (esp. when using percentages for div widths).

.hyper {
    float: left;
    border: 1px solid #CCC;
    text-align: center;
    box-sizing: border-box;
}
.hyperColumn {
    float: left;
    text-align: center;
}
<div class="preview">
<div class="hyperColumn" style="height:180px;width:30%">
   <div class="hyper" style="height:90px;width:100%">1</div>
   <div class="hyper" style="height:90px;width:100%">3</div>
</div>
<div class="hyper" style="height:180px;width:70%">2</div>
<div class="hyper" style="height:90px;width:100%">4</div></div>
8DX
  • 261
  • 2
  • 4