Stick div to the bottom of the page

Question

Hi,
I have div with position absolute and I want to put another div under.
The two divs have diffrent widths.
The div above is with position absolute and is centered. The div that should be at the bottom has 100% width.
How to make that?
Thanks!

Answer 1

• make one div that contains both
• use float:right

example:

div#p8015buttons {
    position:absolute;
    bottom:0.5em;
    right:0.5em;
    width:90px;
}
div.p8015 {
    float:right;
    margin:1px;
}

Answer 2

Wrap both DIVs in a third one and position that one absolute instead of the original one.

Answer 3

Not tested, but this should do it.

HTML:

<div class="wrapper">
      <div class="one">
         Content
      </div>
      <div class="two">
         More content
      </div>
    </div>

And the CSS:

    .wrapper
    {
      position:absolute;
      width: 500px; 
      height: 400px;/*whatever you want*/
      }

    .one,
    .two
    {
      position:relative; /*or static*/
    }

Hope it helps :)

Answer 4

Tested HTML MARKUP

<div class="wrapper">
<div class="left-ontent>
</div>
<div class="right-ontent>
</div>
</div>

CSS

.wrapper{width:980px;margin:0 auto;position:absolute;}
.left-content{float:left;width:630px;}
.right-content{float:right;width:320px;}

Answer 5

Try this one, you can then move style to your css

<div style="width:500px; margin: auto; height:200px; background-color:black;">
</div>
<div style="width:100%; height:200px; background-color:green;">
</div>