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
