1

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; }
Oneezy
  • 4,881
  • 7
  • 44
  • 73
  • Assuming the structure (order of elements, size, etc) was not changing, you could do this with CSS, otherwise you'll need JavaScript. Possibly something like http://masonry.desandro.com/. – j08691 Apr 18 '14 at 18:36
  • 1
    masonry is the only way I know how to do this. I dont think it can be done with pure css. But I might be wrong. – JCBiggar Apr 18 '14 at 18:39
  • Dynamic content is being generated so the heights will always be different – Oneezy Apr 18 '14 at 18:39
  • I've been twisting my head trying to figure it out lol.. i'll checkout that link real quick – Oneezy Apr 18 '14 at 18:40
  • Here is someone who had a similar problem: http://stackoverflow.com/q/3628311/1810777 – JCBiggar Apr 18 '14 at 18:42
  • remove margin simple they ll butt them up from div and add margin to their individual classes – M.chaudhry Apr 18 '14 at 18:42

3 Answers3

2

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.

Leon
  • 1,999
  • 22
  • 38
  • Awesome Leon! This is a perfect solution, i forget if nth-child is supported in IE8 or not – Oneezy Apr 18 '14 at 18:54
  • The nth-child selector is not supported by IE8, unfortunately.. You could do something like `div:first-child + div` to select the second child in IE8 (and `div:first-child + div + div` for the third), but that's a bit devious :) – Leon Apr 18 '14 at 18:58
  • lol.. true, and that might actually have to be done for this project. Nevertheless, your simple answer was exactly what I was looking for – Oneezy Apr 18 '14 at 19:29
1

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.

Satwik Nadkarny
  • 5,086
  • 2
  • 23
  • 41
0

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.

dsimer
  • 115
  • 6
  • Yep - same as mine, but with javascript. The question called for purely CSS, so that's what I offered. – dsimer Apr 18 '14 at 19:04
  • Leon's trick was the nth-child(2) { float: right; },,, the main issue with mine is that these divs are going to be dynamically generated, so i never know what i'll be getting. so i wont ever be able to grab a specific div and put a style on it – Oneezy Apr 18 '14 at 19:44