CSS - How get rid of empty vertical space with floating

Question

When you use floating, the next floated elements will take up at least the same amount of vertical space or more before breaking the line and going lower in the flow. In the image below there is a lot of unused empty space.

with empty vertical space

How can I get more something like this?

without empty vertical space

Here is a fiddle. http://jsfiddle.net/BamBamm/4x51qLt4/1/

<div class="someBlock">...</div>
<div class="someBlock">...</div>
<div class="someBlock">...</div>
<div class="someBlock">...</div>

.someBlock {
    display: inline-block;
    vertical-align:top;
    width: 30%;
    float: left;
}

((Images copied from here: http://designshack.net/articles/css/everything-you-never-knew-about-css-floats/ ))

It needs `absolute` positioning. Not possible with CSS floats (may be possible but not flexible enough). Have a look at [jQuery Masonry](http://masonry.desandro.com/) / [Isotope](http://isotope.metafizzy.co/) plugins or [Salvatore](http://salvattore.com/). — Hashem Qolami, Oct 28 '14 at 20:11
Thank you! Masonry did the trick! If you post this as answer instead of comment, I'll select it (you were the first to mention it). — IPV3001, Oct 29 '14 at 09:57
Thank you, however since this question has been [asked](http://stackoverflow.com/questions/5234749/css-floating-divs-at-variable-heights?rq=1) [couple](http://stackoverflow.com/questions/11136286/css-float-empty-spaces?rq=1) [of](http://stackoverflow.com/questions/6378524/float-variable-height-containers?lq=1) [times](http://stackoverflow.com/questions/5815158/how-to-float-divs-left-with-shorter-divs-one-below-anoter?lq=1) [before](http://stackoverflow.com/questions/11136286/css-float-empty-spaces?rq=1), I'd rather leave this as a comment. — Hashem Qolami, Oct 29 '14 at 11:06

score 4 · Answer 1 · answered Oct 28 '14 at 20:52

4

There's a hack to fill out the space, add this:

.someBlock{
    margin-bottom: -100%;
    padding-bottom: 100%;
    overflow: hidden;
}

Check it out: JSFiddle

Though I'd recommend using something like jQuery Masonry as Hachem Qolami pointed out in comments.

answered Oct 28 '14 at 20:52

Johan Karlsson

6,419
1
19
28

This is definately quite hacky, but still it is a much better solution for the problem than using javascript addons or adding unique classes for every element. – Magnus Jan 04 '19 at 09:29

score 2 · Accepted Answer · answered Oct 28 '14 at 20:55

You can't achieve 100% browser compatibility with pure css nor perfect alignment top, without js. You can use a library called masonry: http://masonry.desandro.com/ . I'm not advertise for it, just trying to give you an easy and very nice solution to your problem.

score 1 · Answer 3 · edited Oct 28 '14 at 20:50

1

As Hashem Qolami ha pointed out, what you are trying to accomplish is not possible via CSS alone. You’ll need to calculate the heights of the different blocks.

But, in case this helps you, there is an easy method to assure that there is always a certain number of elements per line:

.someBlock:nth-of-type(3n+1) {
    clear : both;
}

This won’t answer your question, but maybe it helps others.

edited Oct 28 '14 at 20:50

Ian Hazzard

7,661
7
34
60

answered Oct 28 '14 at 20:21

That doesn't assure there are always 3 `.someBlock` per line, it assures there are maximum 3 `.someBlock` per line. – Johan Karlsson Oct 28 '14 at 20:57
Well, that’s splitting hairs. What I (obviously) meant was, assuming there are at least three elements with the class `.someBlock`, the above CSS-code does assures that there are always three of those elements per line. – Oct 29 '14 at 19:14

score 1 · Answer 4 · answered Oct 28 '14 at 20:25

If the order of the divs are not important, you can use the css3 columns property like this:

body {
     -webkit-column-count: 3;  -webkit-column-gap: 15px; /* Chrome, Safari 3 */
     -moz-column-count: 3;     -moz-column-gap: 15px; /* Firefox 3.5+ */
          column-count: 3;          column-gap: 15px; /* Opera 11+ */
}

Demo: http://jsfiddle.net/ytf66xm7/ (you can see that it will populate from top to bottom, not left to right)

If you need a left to right layout, only way to solve this is using JS, like Masonry or Salvattore, just like Hashem Qolami said in the comment above.

CSS - How get rid of empty vertical space with floating

4 Answers4