Align text to the bottom of adiv

Question

I am trying to align my text to the bottom of div. Normally this is pretty straight forward when using fixed sizes for my divs. I ma trying something new with percentages and the vertical align doesn't seem to work at all.

$(document).ready(function(e) {
    var mh = parseInt($('#map').height());
    var h = 70 - ((20/mh)* 100);
    document.getElementById('map').style.height = h + "%";  
});

#map{
    width:95%;
    height:70%;
    background-color:#F00;
}
<div id="home_header" style="display:table-cell; vertical-align:bottom; width:90%; height:30%;">
<h1>There is currently <?php echo $a; ?> users playing worldwide at the moment.</h1>
</div>
<div id="map"></div>

I do know that this can be done with fixed sizes, I have done i before and seen it done a few times. Heres 1 example. Not sure why this doesn't work is a case of I have to use fixed sizes for the divs or is there another way?

UPDATE- this method does work for fixed sizes, eg 100px;

score 1 · Answer 1 · edited Dec 01 '13 at 21:39

1

try to use this css block

min-height:10em;
vertical-align:middle;
height:15%;
width:25%;
float:left;
margin:10px;
text-align:center;
padding-bottom:3.5cm;
margin-top:auto;
margin-bottom:auto;

edited Dec 01 '13 at 21:39

Dan Is Fiddling By Firelight

5,981
17
77
128

answered Dec 01 '13 at 21:16

Beep

2,737
7
36
85

score 0 · Answer 2 · answered Dec 01 '13 at 21:20

Presuming that you are talking about this being an issue due to unknow sizes, you could simply use absolute positioning....

HTML

<div class="outerDiv">
    <h1>Text to be aligned</h1>
</div>

CSS

.outerDiv {
    position: relative;
    (Other styles here)
}

.outerDiv h1 {
    position: absolute;
    bottom: 0;
    text-align: center; (if needed centralising)
}

That will ensure that the text always stays at the bottom of the div, regardless of the divs height.

score 0 · Answer 3 · answered Dec 01 '13 at 21:45

I would like to share a suggestion I came up with myself that didn't require altering the CSS. I altered the JavaScript to work out how large to make the div as a percentage and scale the div to fit the rest of the page.By using a fixed size with the div all there is left to do is a adjust the bottom div so its scaled to fit.

<div id="home_header" style="display:table-cell; vertical-align:bottom; width:90%; height:125px;">


var mh = parseInt($('#map').height());
    var a = ((20/mh)* 100);
    var b = ((125/mh) * 100);
    var c = ((45/mh) * 100);
    var d = 100 - a - b + c; //add page padding back on
    document.getElementById('map').style.height = d + "%";

I use this in the document ready function as in the question.

Align text to the bottom of adiv

3 Answers3