How to remove white space from different height divs and make them "suck up" to each other? [duplicate]

Question

This question already has answers here:

How to Create Grid/Tile View? [duplicate] (8 answers)

Closed 5 years ago.

I'm trying to make my "divs" stack up. The divs will always be different heights and they create "white space" gaps. I want to remove this white space and "butt" them up next to each other.

This seems like it would be very simple, but I'm having a very hard time finding a solution! I only have one requirement for this, the HTML given in the JSfiddle cannot be edited/added to. I have to do this purely with CSS. Does anyone have a solution?

http://jsfiddle.net/ZMvdy/1/

HTML

<div class="small">small</div>
<div class="xlarge">xlarge</div>
<div class="medium">medium</div>
<div class="xlarge">xlarge</div>
<div class="large">large</div>
<div class="xlarge">xlarge</div>

CSS

div { background: lime; float: left; width: 48%; margin: 1% 1%; display: inline-block; overflow: hidden; vertical-align: top; }

.small { height: 100px; }
.medium { height: 150px; }
.large { height: 200px; }
.xlarge { height: 300px; }

Answer 1

Best thing I can come up with for a CSS only solution, is playing around with float:left and float:right on different divs. But you will probably still need javascript to assign the right properties to the right divs.

Here is an example using float:right; : http://jsfiddle.net/ZMvdy/6/

There are script that do this automatically for you, they basically look at the size of the elements and then use absolute positioning to fit them all together.

Answer 2

Another solution to this could be making use of the old "column" idea. Stack them making two columns as such:

<section id = "leftColumn">
<div class="small">small</div>
<div class="medium">medium</div>
<div class="large">large</div>    
</section>
<section id = "rightColumn">
<div class="xlarge">xlarge</div>
<div class="xlarge">xlarge</div>
<div class="xlarge">xlarge</div>
</section>

Then apply CSS on them as such :

div {
    background-color:lime;
    margin:2%;
    display:block;
}

#leftColumn {
    float:left;
    display:inline-block;
    width:50%;
}
#rightColumn {
    float:left;
    display:inline-block;
    width:50%;
}
.small {height: 100px; }
.medium {height: 150px; }
.large { height: 200px; }
.xlarge { height: 300px;font-size:28px; }

This will give you the desired effect you are looking for.

See this here: http://jsfiddle.net/9YtDs/

Leon's answer is a good solution. However, since you are looking for an IE8 solution, I provided this answer.

NOTE: By default, the section tag doesn't work in IE8. However, there are ways you can make it work in IE8.

Kindly look at http://www.nickyeoman.com/blog/html/118-html5-tags-in-ie8 if you need help for that.

Hope this helps.

Answer 3

If you are looking to have a single column (or if that is acceptable), you could add 'clear:left' to your div css.

You could also mix it up by having some classes 'float:right' while others 'clear:left'.

You will have to play with it to get exactly what you are looking for, but I warn you: if you cannot change the HTML at all (including class assignments), then it may be difficult to accomplish consistent behavior.