CODEWITHSUNDEEP
htmlcss
user1469270
user1469270

Reputation:

Vertically align elements to the bottom of their parent?

I have a 3 columned footer and I need all elements inside to be aligned vertically to the bottom. At the moment, the divs have are aligned to the top: http://jsfiddle.net/tmyie/SMtW6/1/

.col33 {
    width: 33%;
    float: left;
    background-color: red;
    font-size: 90%;
}

.col33 > ul, .col33 > p {
    margin-bottom: 0;
    padding-bottom: 0;
}

However, because this is just a snippet of a much larger site, I'm hesitant to make those floats into inline-blocks. Is there any markup or CSS I can add, to make the children of .col33 vertically align to the bottom?

Upvotes: 0

Views: 58

Answers (2)

SpiderCode
SpiderCode

Reputation: 10122

Update .col33 as mentioned below :

  • Remove float:left
  • Add display:table-cell
  • Add vertical-align:middle

Check below css for the same : 

.col33 {
    width: 33%;
    background-color: red;
    font-size: 90%;;
    vertical-align:middle;
    display:table-cell;
}

Fiddle

Upvotes: 0

Ishank Gupta
Ishank Gupta

Reputation: 1593

Update the CSS of col33 to

.col33 {
  width: 33%;
  background-color: red;
  font-size: 90%;
  height: 100px;
  display: table-cell;
  vertical-align: bottom;
}

Here is the working example http://jsfiddle.net/SMtW6/3/

Upvotes: 1

Related Questions