aligning divs with CSS

Answer 1

.outside{
   position:relative;
   background-color: #000;
   height: 100px;
   text-align: center;
}
.inside{
   height: 30px;
   position:absolute;
   background-color: #fff;
   width: 50%;
   margin: 0px auto;
   bottom: 0px;
   left: 25%;
}
.inside_top{
   bottom: 30px;
}

<div class="outside">
  <div class="inside inside_top"><p>Some content</p></div>
  <div class="inside"><p>Some content</p></div>
</div>

http://jsfiddle.net/xY7hM/16/

Answer 2

This? http://jsfiddle.net/MXf8K/

Answer 3

Once you start using position: absolute, you remove those elements from the regular documentflow, and they won't be counted for width calculations, wrapping, floating, etc... They're basically off in their own little universe as far as the rest of the doucment's concerned. If you don't want the two "inside" divs to overlap each other, you'll have to wrap them in yet another div, position that new div, and let the original two position themselves as normal within that new container.

<style type="text/css">
    .outside { position: relative }
    .container { position: absolute; bottom: 0 }
    .inside { ... }
</style>

<div class="outside">
    <div class="container">
         <div class="inside">lorem</div>
         <div class="inside">ipsum</div>
    </div>
</div>

This way, the container is the only thing affected by the position: absolute and won't fight another element within the 'outside' div. And within the container, the two "inside" divs will position themselves as they normally would anywhere else.