CODEWITHSUNDEEP
css
Noam
Noam

Reputation: 479

aligning divs with CSS

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?

Upvotes: 1

Views: 138

Answers (3)

maletor
maletor

Reputation: 7122

Please check this answer

CSS

.outside {height:200px; border:1px solid red; position:relative;} 
.inside-1 { 
    height: 10px; 
    width: 20px; 
    border: 1px solid black; 
    position:absolute;
    bottom:0;
    left:50%;
    margin-left: -20px;
}

Working Demo

Upvotes: 0

Michael Robinson
Michael Robinson

Reputation: 29498

.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>

Fiddle

Upvotes: 0

Marc B
Marc B

Reputation: 360692

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.

Upvotes: 1

Related Questions