CODEWITHSUNDEEP
htmlxhtmlcss
Liam
Liam

Reputation: 9855

CSS Stacked divs

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/

Upvotes: 0

Views: 622

Answers (2)

spliter
spliter

Reputation: 12569

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.

Upvotes: 2

thirtydot
thirtydot

Reputation: 228182

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>

Upvotes: 1

Related Questions