CODEWITHSUNDEEP
htmlcss
bpolstra
bpolstra

Reputation: 3

Aligning UL block to the bottom of a DIV block

I'm entirely new at this, so if I have stated an unclear question, please ask for clarification.

I have difficulties with placing a ul block at the bottom of a div block. I have researched the answers to the questions that are very similar to mine, but for some reasons, their suggestions and approaches do not work on my codes. I'll provide the following link: http://jsfiddle.net/bKh5L/

HTML 

<div id='tabs'>
    <ul>
        <li>Home</li>
        <li>About Me</li>
    </ul>
</div>

CSS

#tabs{
    position: relative;
}

#tabs > ul{
    height: 100px; 
    position: absolute;
    bottom; 0;    
}

li{
    display: inline-block;
    padding-left: 50px;
    padding-right: 50px;
    margin-right: 25px;
    margin-left: 25px;
    background-color: blue;
    color: red;
}

*{
    margin: 0px;
    border: 1px dashed lightblue;
}

Please, tell me where have I gone wrong and provide the elaborative explanation if you are feeling generous, so I can understand not just how the code work but the concept of vertical alignment itself.

Upvotes: 0

Views: 31

Answers (3)

Zword
Zword

Reputation: 6793

I guess you want something like this seeing bottom:0px; which actually in your fiddle was written wrongly as bottom;0;:

See this fiddle

Upvotes: 0

Niels Keurentjes
Niels Keurentjes

Reputation: 41958

  1. There's a typo in bottom;0;
  2. Give the parent an absolute height as well.

Fixed fiddle.

Upvotes: 0

DaniP
DaniP

Reputation: 38252

Just remove the height from the ul and set it on the #tabs div:

#tabs{
  position: relative;
  height: 100px; 
}

#tabs > ul{
  position: absolute;
  bottom: 0;    
}

Also you have a typo error on bottom:. Check this Demo

Another option to keep the height on ul but without position:absolute :

#tabs > ul:before {
  display:inline-block;
  content:" ";
  height:100%;
}
li{
  vertical-align:bottom;
  display: inline-block;
}

Another Demo

Upvotes: 1

Related Questions