CODEWITHSUNDEEP
htmlcss
anirudh
anirudh

Reputation: 4176

css floating divs creates vertical gap

My question is similar to this question, but I have a different requirement, so thought I would ask a separate question

I'm trying to create a series of div's and display them in a three column layout.

The layout is as shown in http://jsfiddle.net/o595n5tr/3/.

HTML

<div class="list">
    <div class="item">Lorem ipsum dolor sit amet,</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
    <div class="item">Lorem ipsum dolor sit amet,</div>
    <div class="item">Lorem ipsum dolor sit amet,</div>
    <div class="item">Lorem ipsum dolor sit amet</div>
    <div class="item">Lorem ipsum dolor sit amet</div>
</div>

CSS

.group:before,
.group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    *zoom: 1;
}

.list{
    width: 300px;
}

.item{
    float: left;
    width: 90px;
    background: yellow;
    margin-right: 5px;
    margin-bottom: 10px;
}

.item:nth-child(3){
    background: brown;
}

.item:nth-child(5){
    background: red;
}

Could someone please tell me why the there is a vertical gap between the first div and the red div below it. Also could you please tell me how to fix that gap.

I'm fine with the fourth column appearing below the third column by the way, that is what I want.

Thanks in advance

Upvotes: 1

Views: 1583

Answers (2)

Matthew Marlin
Matthew Marlin

Reputation: 318

The gap is caused by the height of your 3rd and 4th div in the list. As @K.M.B mentioned your grouping in a row-wise fashion by using the float: left. So, as soon as the on of the list div's overflows its parent it takes the height of the last div which was placed (the 4th) and bases the placement of the next div base on that.

To help visualize this, imagine sliding the divs in one by one from the top right. As soon as it overflows the parent container it slides down along the last element which was placed, until it can move left and fit into the parent container. That's why the 4th div is under the 3rd. Then the next element slides down 3 & 4, then uses that height (i.e the row height).

If you change the display mode to inline-block. You can see the reverse effect taking place. http://jsfiddle.net/o595n5tr/6/

Assuming you can't use a fixed height for the blocks...

You could use absolute positioning to manually place the div's within a container that uses relative positioning (But this is obviously not going to be responsive)

You might want to think about using a library like masonry. Its a JS library which helps with this kind of common problem. http://masonry.desandro.com/

Otherwise you might want to add column divs to group them vertically. This would solve your problem with the vertical gap. Again this could have problems with responsiveness (i.e mobile devices).

Upvotes: 2

Muthukumar
Muthukumar

Reputation: 362

for this we have a 2 solution

  1. Set a min-height in item class

.item{ float: left; width: 90px; background: yellow; margin-right: 5px; margin-bottom: 10px; min-height:150px; }

or

  1. Set a row div for each rows
<div class="list">   
    <div class="row">
       <div class="item">Lorem ipsum dolor sit amet,</div>
       <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
       <div class="item">Lorem ipsum dolor sit amet,</div>  
    </div>  
    <div class="row">
       <div class="item">Lorem ipsum dolor sit amet,</div>
       <div class="item">Lorem ipsum dolor sit amet</div>
       <div class="item">Lorem ipsum dolor sit amet</div>  
    </div> 
</div>

.row{
 display:inline-block;
}

Upvotes: 0

Related Questions