4

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.

Improve this question
3
  • use ng-view, so that the content will load inside the div Commented Jun 17, 2015 at 10:34
  • try white-space: nowrap; Commented Jun 17, 2015 at 10:36
  • 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? Commented Jun 17, 2015 at 10:38

1 Answer 1

Reset to default
0

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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).