Text vertical align bottom

**jan24** · 10-19-2010, 05:56 PM

Hello,

As the title it says i want to make a text vertical align to the bottom.
I have been searching a lot around the internet but oculdn't find the answer.
The closest answer i could find was to put line-height to same height as the div might be. Then the text will be vertical align center although i want to have it at the bottom.

I hope somebody could help me with this problem.
Thanks in advance, greetz,

Jan24

**coothead** · 10-19-2010, 08:02 PM

Hi there jan24,

here is an example for you to try...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#box {
    position:relative;
    width:400px;
    padding:20px 20px 60px;
    border:3px double #999;
    margin:auto;
 }
#box p {
    margin:0;
    background-color:#ccc;
    color:#333;
 }
#box span {
    position:absolute;
    bottom:20px;
    color:#600;
    line-height:20px;
    background-color:#fcc;
 }
</style>

</head>
<body>

<div id="box">

<span>This is  the bottom text</span>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p>

</div>

</body>
</html>

coothead

Thread: Text vertical align bottom

Thread Tools

Search Thread

Text vertical align bottom

Bookmarks

Bookmarks

Posting Permissions