Question

I have a few divs inside a div.

<div class="outside">
  <div class="inside"></div>
  <div class="inside></div>
</div>

I want to align the inner divs at bottom middle of the outside div.

To align them at the bottom I tried

.outside { position:relative;} .inside { bottom:0px; position:absolute; }

Which works but puts the divs over each other so one of the divs isn’t viewable, how can I fix this? and how can I move them to the center?

Answer 1

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.