mckeegan375 mckeegan375 - 1 year ago 192
CSS Question

Floated div vertical align

I am trying to vertically align the text in a floated div to the bottom but it doesn't seem to work. Here is what I currently have:

<div class="header_left">TEXT</div>


.header_left {
width: 50%;
text-align: left;
float: left;
vertical-align: bottom;
border-bottom: 1px solid #666;

I need the div to be floated as I want to place 2 divs side by side but I cannot seem to make the text go to the bottom of the div.

Answer Source

Working DEMO

You need to have 2 divs to achieve this with relative and absolute position.

<div id="container">
  <div id="content">Bottom Content</div>

    position: relative; 
    height: 200px;
    background-color: #eee;

    position: absolute; 
    bottom: 0; 
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download