CODEWITHSUNDEEP
css
mckeegan375
mckeegan375

Reputation: 255

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>

CSS:

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

Upvotes: 1

Views: 194

Answers (3)

user6765917
user6765917

Reputation:

Another thing to try if you dont want a div container, set a margin top & bottom. For example:

.header_left {
margin-top:50%
margin-bottom:50%
}

You'll have to tinker with the measurements, 50% isn't always the amount to use. I used 9% to vertically align a floating :before image on a button on a mobile site I was working on.

Upvotes: 0

Pranav
Pranav

Reputation: 8871

http://jsfiddle.net/2Z6tA/1/

<div class="header_left">
    <span id="bottom">Text at bottom</span>
</div>

CSS:-

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

span#bottom{
    position: absolute;    
    bottom: 0;
}

Upvotes: 1

Gurpreet Singh
Gurpreet Singh

Reputation: 21233

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>
</div>​

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

#content 
{ 
    position: absolute; 
    bottom: 0; 
}​

Upvotes: 2

Related Questions