CSS float empty spaces

Question

I have multiple divs in a wrap, they have different height. I'd like to float left. 2 Divs can fit in a row. But since each of the div has different height, there's pretty much odd space left in next row. Can I remove the space and move the div's up?

Please look at the image:

Here's code:

<div class="wrap">
    <div class="box1">Box1 with less height.</div>
    <div class="box2">Box2 with more height.</div>
    <div class="box3">Box3 with whatever height.</div>
</div>

CSS:

.wrap{
    width:410px;
    border:1px solid red;
    overflow:hidden;
}

.box1{
    width:200px;
    height:50px;
    float:left;
    border:1px solid green;
}

.box2{
    width:200px;
    height:150px;
    float:left;
    border:1px solid blue;
}

.box3{
    width:200px;
    height:250px;
    float:left;
    border:1px solid blue;
}

JSFiddle: http://jsfiddle.net/NsH5M/

PS. The div heights are not fixed. This is just for example. Edit: Sorry, I should have mentioned that its not possible to edit markup.

Answer 1

Try to use masonry. This should help you to arrange your div without empty space.

That's how it is used as an example of your code: jsfiddle (Updated 11/2018)

HTML:

<div class="wrap">
    <div class="box box1">Box1 with less height.</div>
    <div class="box box2">Box2 with more height.</div>
    <div class="box box3">Box3 with whatever height.</div>
</div>

JavaScript:

$(function(){
  $('.wrap').masonry({
      // options
    itemSelector : '.box'
  });
});​
​

And CSS:

.wrap{
    width:410px;
    border:1px solid red;
    overflow:hidden;

}

.box{
    float: left;
    width: 200px;
}

.box1{
    height:50px;
    border:1px solid green;
}

.box2{
    height:150px;
    border:1px solid blue;
}

.box3{
    height:250px;
    border:1px solid blue;
}

Answer 2

Just use float:right for the elements that you want on the right. In this case:

.box2{
width:200px;
height:150px;
float:right;
border:1px solid blue;
}

Your jsfiddle updated here

Answer 3

Give float:right to.box2 Write like this:

.box2{
    width:200px;
    height:150px;
    float:right;
    border:1px solid blue;
}

Check this http://jsfiddle.net/NsH5M/2/

Answer 4

I'm not sure if it would work but you can try floating box 1 and box 3 to the left and box 2 to the right

EDIT: works in firefox http://jsfiddle.net/NsH5M/1/

Answer 5

if you can edit your markup, you can wrap box1 and box3 in a container that is floated:

http://jsfiddle.net/NsH5M/3/

you can also float: right your box3 but that will slightly change the outcome (there will be a gap between the boxes floated on the left and the one on the right - which may not be a problem depending on your design.

Answer 6

Isotope can do this for you, using the masonry layout.

Answer 7

Correct solution... The key question is "do you have just 2 columns?". And since here it is the case, the correct solution would be this:

(this is a jQuery code but obviously it can be done if few more words in pure JS)

It my case class "add-info" was assigned to all elements in the container. What you are doing is simply checking if next element should be floated to the left or right. Don't use complex scripts for everything. Half of the people are accessing web from mobile phone and amount of mobile data is limited.

function contactFloats() {
    var leftCounter = 0;
    var rightCounter = 0;
    $('.add-info').each(function(){
            if(leftCounter <= rightCounter){
                $(this).css('float', 'left');
                leftCounter += $(this).outerHeight();
            }else{
                $(this).css('float', 'right');
                rightCounter += $(this).outerHeight();
            }
    });
}