469,623 Members | 1,497 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,623 developers. It's quick & easy.

Bottom-aligned text in a fixed-height DIV

Hi,

I'm currently encountering a problem with vertical alignment of text in
a DIV that drives me mad.

I'm having a DIV with a fixed height (say 50px) which contains some text
from which I don't know if it will be rendered in one line or two.

But that text should absolutely be bottom-aligned since the space
between the bottom border-line and the text must always be the same and
the bottom border-line must always be at the same vertical position, no
matter if the text is rendered as one line or two lines.

I need a similar behaviour as with <td valign="bottom"> table cells.

Some ASCII art for further explanation (monospaced font useful):

---------------------- ^ -------------
| | | | |
| | fixed | |
| | height | two-line |
| one-line text | | | text |
====================== V ============= <- border bottom-line

Currently I'm using:

<div class="chapter">Some text</div>

with

div.chapter {
position: relative;
top: 40px;
float: left;
height: 50px;
width: 320px;
margin: 0 0 0 20px;
padding: 0;
text-align: left;
vertical-align: bottom;
font-size: 40px;
font-weight: bold;
border-bottom: 7px #7080C0 solid;
}

which produces a real mess, when the text in the DIV wraps.

Can anyone help me?

Thanks,

Michael


Jul 21 '05 #1
3 48251
Michael Goldbach wrote:
Hi,

I'm currently encountering a problem with vertical alignment of text in
a DIV that drives me mad.

I'm having a DIV with a fixed height (say 50px) which contains some text
from which I don't know if it will be rendered in one line or two.

<snip>

How about this approach? Change the line height of the .clear div to
vary the amount of space that appears above the text.

<style type="text/css">
..chapter {
position: relative;
top: 40px;
float: left;
height: 50px;
width: 320px;
margin: 0 0 0 20px;
padding: 0px;
text-align: left;
vertical-align: bottom;
font-size: 40px;
font-weight: bold;
border-bottom: 7px #7080C0 solid;
background-color: #FFAABB;
}
..clear{
clear: all;
font-size: 15px;
}
</style>
</head>

<body>
<div class="chapter">
<div class="clear">&nbsp;</div>
Large Amount of Text (line wrap)</div>
<br>
<br>
<div class="chapter">
<div class="clear">&nbsp;</div>
Small Amt Txt</div>
</body>
Jul 21 '05 #2
In comp.infosystems.www.authoring.stylesheets Michael Goldbach said:
I'm currently encountering a problem with vertical alignment of text in
a DIV that drives me mad.
I'm having a DIV with a fixed height (say 50px) which contains some text
from which I don't know if it will be rendered in one line or two.


div{height:50px;position:relative;}
p{bottom:0;position:absolute;}

<div>
<p>some text</p>
</div>
--
the facts and opinions expressed by brucies
l i t t l e v o i c e s
are not necessarily the same as those held by brucie.
Jul 21 '05 #3

brucie wrote:
div{height:50px;position:relative;}
p{bottom:0;position:absolute;}

<div>
<p>some text</p>
</div>


Yeah, that's it! It works. You're my saviour.

Bye,

Michael

Jul 21 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Tony Benham | last post: by
13 posts views Thread by Michael Hill | last post: by
2 posts views Thread by Gnolen | last post: by
6 posts views Thread by George Hester | last post: by
26 posts views Thread by meltedown | last post: by
23 posts views Thread by Antoon Pardon | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.