How can I fix the div to the bottom of the bigger div?

Question

I am creating a simple css chart responsive that works on any browser. This is my code:

<div style="width:500px;height:300px;">
    <div style="width:10%;height:20%;background:#00ffff;float:left;"></div>
    <div style="width:10%;height:40%;background:#00ffff;float:left;"></div>
    <div style="width:10%;height:80%;background:#00ffff;float:left;"></div>
</div>

But as you can see, the chart is inverted:

http://jsfiddle.net/xkd6twsq/

I tried with:

position:relative;
bottom:0px;

but doesn't work:

http://jsfiddle.net/xkd6twsq/1/

I've updated my answer below. The main idea with `display: inline-block` stays, I've added vertical alignment to bottom of parent which I forgot before. — pavel, May 25 '15 at 10:48

pavel · Accepted Answer · 2015-05-25T10:47:07.187

2

Use display: inline-block instead of float. The parent needs display: table-cell and vertical-align to align graph to bottom.

<style>
    div {
        display: table-cell; 
        vertical-align: bottom;
    }
    div div {
        display: inline-block;
        width: 10%;
        background: #0ff;
    }
</style>

<div style="width:500px;height:300px;">
    <div style="height:20%;"></div>
    <div style="height:40%;"></div>
    <div style="height:80%;"></div>
</div>

http://jsfiddle.net/xkd6twsq/4/

edited May 25 '15 at 10:47

answered May 25 '15 at 10:38

pavel

26,538
10
45
61

@xRobot: you can simply try it. But yes, it works in all browsers supported `table-cell`, IE8+. – pavel May 25 '15 at 11:08
I haven't IE8+ to try :) – xRobot May 25 '15 at 11:09

score 2 · Answer 2 · edited May 23 '17 at 11:43

The problem is the float:left, using display: inline-block will get what you want:

<div style="width:500px;height:300px;">
<div style="width:10%;height:20%;background:#00ffff;display:inline-block;"></div>
<div style="width:10%;height:40%;background:#00ffff;display:inline-block;"></div>
<div style="width:10%;height:80%;background:#00ffff;display:inline-block;"></div>
</div>

All about floats from CSS-tricks explains when to use floats and this display types answer details why floats are not the best option.

How can I fix the div to the bottom of the bigger div?

2 Answers2