CSS Stacked divs

Question

I have some divs which are all floating left, If you see the attached jsfiddle you will see what im trying to do, in the fiddle there is a yellow box, I need this to be flush with the bottom of the green box only im not sure if this is even possible?

Is it? and if so how may I do this? Thanks in advance!

http://jsfiddle.net/K5zjc/

spliter · Accepted Answer · 2011-07-21T13:42:25.127

2

Try something like this jsFiddle. Techincally, you float even .box items to the right instead of left and then you are getting self-filling columns in accordance to their content. So, in your CSS you add:

.box:nth-child(odd) {clear: left}
.box:nth-child(even) {float: right; clear: right}

UPDATE

Apparently this solution doesn't work nice if you have more than these specific blocks. So, probably, jQuery Masonry is the only way for you to get the good result.

edited Jul 21 '11 at 13:42

answered Jul 21 '11 at 13:22

spliter

12,321
4
33
36

Yeah, I think jQuery Masonry is the easiest way to achieve what is needed here if the height of the containers and their number is not known. – spliter Jul 21 '11 at 13:33
I guess he only needed those four boxes and doesn't care about older browsers and *really* didn't want to change the HTML. So your answer was better for him. – thirtydot Jul 21 '11 at 13:39

score 1 · Answer 2 · answered Jul 21 '11 at 13:19

1

You must add two divs with float: left that act as columns.

See: http://jsfiddle.net/K5zjc/5/

<div style="width:200px;">
    <div class="boxContainer">
        <div class="box green">
            <ul><li>Item</li></ul>
        </div>
        <div class="box yellow">
            <ul><li>Item</li><li>Item</li></ul>
        </div>
    </div>
    <div class="boxContainer">
        <div class="box red">
            <ul><li>Item</li><li>Item</li><li>Item</li><li>Item</li></ul>
        </div>
        <div class="box cyan">
            <ul><li>Item</li><li>Item</li></ul>
        </div>
    </div>
</div>

answered Jul 21 '11 at 13:19

thirtydot

224,678
48
389
349

My only problem is im working with an existing .net website where the items are generated on the fly so I'm unaware of how to wrap X amount of items in 1 column and X in the other. – Liam Jul 21 '11 at 13:20
I can't help you with the server-side part. From a front-end point of view, see this answer: http://stackoverflow.com/questions/6378524/float-variable-height-containers/6378690#6378690. You might find using jQuery Masonry easier, especially if you're already using JavaScript/jQuery. – thirtydot Jul 21 '11 at 13:27

CSS Stacked divs

2 Answers2