CODEWITHSUNDEEP
css
ldoroni
ldoroni

Reputation: 629

vertical-align:bottom WITH float:left

how could i do vertical-align:bottom for some divs that have float:left?

you can see the source here: http://jsfiddle.net/Lb1su4w2/

this is what i have: (every color is a different div) enter image description here

this is what i want to have: enter image description here

Upvotes: 10

Views: 11853

Answers (2)

Leggy
Leggy

Reputation: 682

HTML:

<div id='wrapper'>
    <div id='a' class='box'>aa</div>
    <div id='b' class='box'>bb</div>
    <div id='c' class='box'>cc</div>
    <div id='d' class='box'>dd</div>
</div>

CSS:

.box {
    width:80px;
    vertical-align: bottom;
    display: inline-block;
}
#a {
    background-color:red;
    height:200px;
}
#b {
    background-color:green;
    height:100px;
}
#c {
    background-color:yellow;
    height:150px;
}
#d {
    background-color:blue;
    height:300px;
}

#wrapper {
    border: 1px solid pink;
    display: table;
}

In this case don't use:

float: left;

Instead use:

display: inline-block;

Check out my fiddle:

http://jsfiddle.net/Lb1su4w2/6/

Upvotes: 2

nickspiel
nickspiel

Reputation: 5630

Vertical align only works with inline block elements, floated elements ignore the vertical align property.

Update the box class with the following:

.box {
    display: inline-block;
    vertical-align: bottom;
    width:80px;
}

I would make them all inline block elements and remove the whitespace with one of these techniques.

Updated fiddle: http://jsfiddle.net/9rcnLb8n/

Alternatively you could use flexbox with the align-self: flex-end; property.

Upvotes: 10

Related Questions