Stick div to the bottom of the page

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!

• 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;
}

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

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

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;}

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>