how to make a div to float down?

Question

I have 4 divs. One is outer wrapper, and other 3 are header, content and footer respectively. All the are of same(fixed) width. But height of outer wrapper and content div are variable.

irrespective of the size of these, i want the footer div to stick at the bottom of outer wrapper. I have tried using the following CSS

position: relative;
bottom: 0px;

But it didn't work. Does anybody know a solution?

What browser are you using? Could you show us an example page? (on [JSFiddle](http://jsfiddle.net) perhaps?) — Alex L, Dec 28 '12 at 04:06
That CSS snippet is saying, "place the bottom border 0x away from (relative to) where it would usually be." — Andrew Barber, Dec 28 '12 at 04:07
Do you want the `footer` div to be below the `content` div irrespective of the height of the `wrapper` div, or do you want the `footer` to stick to the bottom of the `wrapper` div irrespective of the height or the `content` div? Just want to know if the height of the `wrapper` div can be greater than the heights of `header` + `content` + `footer` divs? — sarcastyx, Dec 28 '12 at 04:10
2 similar questions: http://stackoverflow.com/questions/526035/html-css-positioning-float-bottom and http://stackoverflow.com/questions/311990/how-do-i-get-a-div-to-float-to-the-bottom-of-its-container — Hui Zheng, Dec 28 '12 at 04:16

score 28 · Accepted Answer · edited Sep 20 '21 at 18:04

28

To align a div to the bottom, first you have to make the parent div's position relative, then make the required div's position to absolute and set the bottom property to zero.

<div style="position: relative; height: 100px; border: solid;">
  <div style="position: absolute; height: 10px; border: solid; bottom: 0; right: 0;  left: 0; ">
  </div>
</div>

edited Sep 20 '21 at 18:04

MonoWolfChrome

218
2
15

answered May 04 '13 at 17:07

Thomas C. Rodriguez

933
1
10
8

7

Don't you mean "make the required div's position to absolute," since you wrote that in your code block? – 2rs2ts Mar 02 '14 at 01:04

d-_-b · Answer 2 · 2012-12-28T05:14:44.247

The footer div will need to be either:

position:absolute;bottom:0;; This will push it to the bottom of its container, however, when you scroll down past the container, the footer will scroll with it.
position:fixed;bottom:0;; This is used more often for sticky footers. This will place the footer at bottom:0 of your screen. so no matter where you scroll, what you see is what you get (it will not move around while scrolling)
position:relative;bottom:0;; could be used, but it will be relative to it's siblings (i.e. unless the content div is pushing it to the bottom, it won't go there), or, I believe if the container is relative then it may work (but please correct me if I'm wrong).

Based on your question: i want the footer div to stick at the bottom of outer wrapper. it sounds like you want to use absolute positioning for the footer, so that it'll always stick to the bottom of its container....

If you want the footer to stay on the bottom of the screen no matter where the user scrolls to, then I'd recommend fixed positioning.

Definitely check out some... tutorials and most importantly, mess around and experiment yourself!

you can make us a jsfiddle and maybe it'll shed more light on what you're trying to accomplish. good luck!

This was a very informative post. I feel like this should be the accepted one. — 2rs2ts, Mar 02 '14 at 01:03

score 7 · Answer 3 · answered Dec 28 '12 at 04:15

You can let the wrapper's position is relative and the inner Divs position are absolute.

<div style="position: relative; height: 200px">
    <div style="position: absolute; top: 0px; height: 20px; background-color:red">
        header
    </div>

    <div style="position: absolute; top: 20px; bottom: 20px; overflow-y: auto">
        content
    </div>

    <div style="position: absolute; bottom: 0px; height: 20px; background-color:red">
        footer
    </div>
</div>

Try this http://jsfiddle.net/YAaA3/

score 2 · Answer 4 · answered Dec 28 '12 at 04:34

2

use a clear to get the footer below the content.

simply -

#header {
 clear:both;
}
#footer {
 clear: both;
}

That should force the header to be on top, and the footer to fall below the floated elements.

answered Dec 28 '12 at 04:34

Drew Dahlman

4,952
1
22
34

score 2 · Answer 5 · answered May 04 '13 at 18:24

2

<div>
  <div style="position: relative; height: 10%; top: 90%; ">
  </div>
</div>

answered May 04 '13 at 18:24

Jeffrey

234
2
2

Shiridish · Answer 6 · 2012-12-28T05:05:35.840

0

[UPDATED]

Here is the CSS that always sticks the footer to the bottom.

*DEMO*

CSS-

* {
    margin: 0;
}
html, body {
    height: 100%;
}
#ou {
    position:relative;
    background-color:grey;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    width:400px;
    margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */
}
#he
{
    height:30px;
    background-color:red;
}
#fo{
    background-color:yellow;
    height: 30px; /* .push must be the same height as .footer */
    position:relative;
    width:400px;
    margin:0 auto;
}

edited Dec 28 '12 at 05:05

answered Dec 28 '12 at 04:33

Shiridish

4,942
5
33
64

you are close. There is an issue with this answer. If the content is long then the absolute positioned footer will be above the `content` div. To fix that you can add `padding-bottom: 35px;` to the `content` div and you won't get the footer overlap. – sarcastyx Dec 28 '12 at 04:36
@sarcastyx: Updated the answer with a solution should work perfect. – Shiridish Dec 28 '12 at 05:06

how to make a div to float down?

6 Answers6