CODEWITHSUNDEEP
css
xRobot
xRobot

Reputation: 26567

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

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/

Upvotes: 2

Views: 83

Answers (2)

Armfoot
Armfoot

Reputation: 4921

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.

Upvotes: 2

pavel
pavel

Reputation: 27092

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/

Upvotes: 2

Related Questions