align a div at the bottom

Question

I have a div which I want to align at the bottom of the page. For that I have used the following --

<div style="position:fixed;bottom:0;overflow:auto;word-wrap:break-word;display:block" ng-show="noData || failedStatus">
    <div class="alert alert-danger" ng-show="noData" style="overflow:auto;word-wrap: break-word;">
        <!-- something -->
    </div>
    <div class="alert alert-danger" ng-show="failedStatus" style="overflow:auto;word-wrap: break-word;">
        <!-- something -->
    </div>
</div>

This code is aligning the div at the bottom but it is not wrapping the words inside the div.

Your code seems to be missing `position: fixed` or `position: absolute`, otherwise, it is hard to see what you are trying to do. So is the problem with the alignment to the bottom, or the wrapping of the text inside the `div`'s, or both? — Marc Audet, Jun 17 '15 at 10:38

score 0 · Answer 1 · answered Jun 17 '15 at 10:48

Here is the Fiddle Demo

You were missing position:absolute; from your css.

It is most recommented to avoid inline css instead you have class associated with the parent div and then apply the css to it.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
.footer-div{
    bottom:0;
    overflow:auto;
    word-wrap:break-word;
    display:block;
    position: absolute;
}
</style>
</head>
<body>
<div class="footer-div" ng-show="noData || failedStatus">
    <div class="alert alert-danger" ng-show="noData" style="overflow:auto;word-wrap: break-word;">
        <!-- something -->
        Some text
    </div>
    <div class="alert alert-danger" ng-show="failedStatus" style="overflow:auto;word-wrap: break-word;">
        <!-- something -->
        Some text
    </div>
</div>
</body>
</html>

The problem with position:absolute is that if there are no divs before the concerned div, then it will come at the top. I want the div to always come at the bottom (same is the problem if I use footer). — , Jun 18 '15 at 01:42

align a div at the bottom

1 Answers1