Floated divs don't like up vertically as desired

Question

I've got some divs, all floated left, the first of which is three times wider and a bit shorter than the rest. When the smaller divs wrap and break onto the next "line", I'd like the first three of the smaller divs to lie flush against the bottom of the larger one. (A bit tricky to describe in text, but the fiddle will give you the idea.)

How do I make this happen?

Markup:

<div class="bigger"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>

Style:

.bigger {
    height: 40px;
    width: 308px;
    margin: 0 4px 4px 0;
    background: red;
    float: left;
}

.smaller {
    height: 60px;
    width: 100px;
    margin: 0 4px 4px 0;
    background: blue;
    float: left;
}

The three left-most blue divs in the fiddle should line up against the red one according to their margins (4px bottom margin on the red div)

http://jsfiddle.net/PKBQH/

For the record, it looks like pinterest accomplished their staggered float-like layout by using a script to assign absolute positions to each div, which is something I'd rather not do.

Yep! Thanks, apologies for the duplicate. – Patrick Estabrook Sep 03 '13 at 18:32 — Patrick Estabrook, Sep 03 '13 at 18:32

score 0 · Answer 1 · answered Sep 03 '13 at 18:36

0

You could just wrap the whole thing in an outer box of the right width:

.outside {
    width: 324px;
}

...like this...

answered Sep 03 '13 at 18:36

DigitalRoss

143,651
25
248
329

score 0 · Answer 2 · answered Sep 03 '13 at 18:37

is this what you are trying to achieve?

http://jsfiddle.net/nickadeemus2002/gDAB2/

HTML: add a new class "adjust" for all the element you want to move up.

    <div class="bigger"></div>
<div class="smaller"></div>

<div class="smaller adjust"></div>
<div class="smaller adjust"></div>
<div class="smaller adjust"></div>
<div class="smaller"></div>

<div class="smaller adjust"></div>
<div class="smaller adjust"></div>
<div class="smaller adjust"></div>
<div class="smaller"></div>

<div class="smaller adjust"></div>
<div class="smaller adjust"></div>
<div class="smaller adjust"></div>

now create the "adjust class so it moves elements using relative positioning:

.adjust{
    position:relative;
    top:-20px;
}

Floated divs don't like up vertically as desired

2 Answers2