CODEWITHSUNDEEP
cssvertical-alignment
Peter
Peter

Reputation: 1296

Vertical align div to bottom on parent absolutely positioned

I have 2 cases: In one parent is relative positioned and bottom align works OK In second parent is absolute positioned and bottom align won't work !?

Is there a way-around ?

<style>
#container {
  height: 300px;
  border: 1px solid;
  padding: 5px;
  display: table-cell;
  vertical-align: bottom;
  position: absolute;
}
.message {
  border: 1px solid;
  margin-top: 5px;
}
</style>

<p>Top of page</p>
<div id="container">
<div class="message">Message 4</div>
<div class="message">Message 3</div>
<div class="message">Message 2</div>
<div class="message">Message 1</div>
</div>
<p>Bottom of page</p>

Here is fiddle for 1st case (relative position #container): http://jsfiddle.net/arunpjohny/49RqX/1/

And same fiddle where container has absolute position: http://jsfiddle.net/49RqX/61/

Upvotes: 1

Views: 4815

Answers (1)

Zwipper
Zwipper

Reputation: 41

Do u think something like this?

#container {
    height: 300px;
    width: 70px;
    border: 1px solid;
    padding: 5px;
    display: table-cell;
    vertical-align: bottom;
    /*position: absolute;*/
}

.message {
    border: 1px solid;
    margin-top: 5px;
    float: left;
}

http://jsfiddle.net/Zwipper/eSEc4/

I have removed position: relative and added a width to "container" and added float: left to "message".

Hope this is an answer u can use :)

Upvotes: 4

Related Questions