How do i place text at the bottom of a div ?

[levski]

As obviously vertical allign is not meant to do this, what are my
options ?

[Steve Pugh]

levski <de************ *********@xs4al l.nl> wrote:

As obviously vertical allign is not meant to do this, what are my
options ?

Presuming that the div has a fixed height (or preferably a fluid
height and min-height)....

display: table-cell; vertical-align: bottom; applied to the div (Not
supported by IE)

position: relative; applied to the div and then position: absolute;
bottom: 0; applied to a container around the text. (risky, can lead to
all sorts of problems)

Apply padding-top to the div to move content downwards (not perfect
and you need to guess the value of the padding as you don't know for
sure how big the text will be).

There may be other solutions depending on the full details of your
design.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>

[Don G]

> position: relative; applied to the div and then position: absolute;

bottom: 0; applied to a container around the text. (risky, can lead to
all sorts of problems)

I was planning to use this solution on my website, but I was unaware of
any problems with this method. If you would, please elaborate on why
this solution is risky, and what sort of problems it might lead to.

Thanks,

Don

[Martin!]

Don G wrote:

position: relative; applied to the div and then position: absolute;
bottom: 0; applied to a container around the text. (risky, can lead to
all sorts of problems)

I was planning to use this solution on my website, but I was unaware of
any problems with this method. If you would, please elaborate on why
this solution is risky, and what sort of problems it might lead to.

Thanks,

Don

experience learns us that nested positioning easily triggers bugs in IE

but .. sometimes it works :)

[kchayka]

Don G wrote:

position: relative; applied to the div and then position: absolute;
bottom: 0; applied to a container around the text. (risky, can lead to
all sorts of problems)

I was planning to use this solution on my website, but I was unaware of
any problems with this method.

Bottom positioning is quirky in some browsers, though I don't have a
list handy at the moment. Broken browsers may position at the bottom of
the viewport rather than the bottom of the container.

If you use this method, I suggest you do extra testing.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[levski]

In article <gb************ *************** *****@4ax.com>, Steve Pugh
<st***@pugh.net > wrote:

levski <de************ *********@xs4al l.nl> wrote:

As obviously vertical allign is not meant to do this, what are my
options ?

Presuming that the div has a fixed height (or preferably a fluid
height and min-height)....

display: table-cell; vertical-align: bottom; applied to the div (Not
supported by IE)

position: relative; applied to the div and then position: absolute;
bottom: 0; applied to a container around the text. (risky, can lead to
all sorts of problems)

Apply padding-top to the div to move content downwards (not perfect
and you need to guess the value of the padding as you don't know for
sure how big the text will be).

There may be other solutions depending on the full details of your
design.

Steve

Thanks for your swift reply, it was indeed a fixed size div, I alread
did what you proposed, positioning a container absolute within the
containing relative div. Like this:
http://www.e-psychiater.nl/testsite/...sychiater.html
What I don't understand are two things:
1. the containing element is 90px high and the fontsize is 48px, so
you would think I need a top-padding of 90-48=42 px ?
WRONG: I have to use 45px, why ?
2. What is causing the space in front of the P from Psychiater, I have
to position the container around the text -3px to the left ?
Thanks for the display table-cell, but I have to be IE compliant 8-(
Detlef

[Steve Pugh]

Don G <ma******@yahoo .com> wrote:

position: relative; applied to the div and then position: absolute;
bottom: 0; applied to a container around the text. (risky, can lead to
all sorts of problems)

I was planning to use this solution on my website, but I was unaware of
any problems with this method. If you would, please elaborate on why
this solution is risky, and what sort of problems it might lead to.

Others have mentioned the bugs that some browsers have with
positioning in general and bottom in particular.

But even when working perfectly there may be problems. You can't know
how big the text will be so you can't know how tall the positioned
element will be. As the positioned element has been taken out of the
document flow it doesn't contribute to div's height. So the top of the
text may well end up spilling out the top of the div and overlapping
any elements that preceeded the div. If the div is near the top of the
page the text may even extend off the top of the browser window.

This sort of thing can happen whenever absolute positioning is used
but seems to happen more often when absolute positioning is used as a
substitute for IE's lack of support for half the decent stuff in CSS2.
:-(

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>

[Steve Pugh]

levski <le****@neverle vskiland.com> wrote:

Steve Pugh <st***@pugh.net > wrote:

levski <de************ *********@xs4al l.nl> wrote:

>As obviously vertical allign is not meant to do this, what are my
>options ?
Presuming that the div has a fixed height (or preferably a fluid
height and min-height)....

position: relative; applied to the div and then position: absolute;
bottom: 0; applied to a container around the text. (risky, can lead to
all sorts of problems)

Thanks for your swift reply, it was indeed a fixed size div, I alread
did what you proposed, positioning a container absolute within the
containing relative div. Like this:
http://www.e-psychiater.nl/testsite/...sychiater.html
What I don't understand are two things:
1. the containing element is 90px high and the fontsize is 48px, so
you would think I need a top-padding of 90-48=42 px ?
WRONG: I have to use 45px, why ?

The line-height is normally a aboit 10-20% taller than the font-size.

What's more, in your case you want the baseline of the font to be at
the bottom of the div, not the bottom of the font.
2. What is causing the space in front of the P from Psychiater,

Between the hyphen and P? Or do you mean before the E?

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>

[levski]

In article <f9************ *************** *****@4ax.com>, Steve Pugh
<st***@pugh.net > wrote:

I mean the whitespace before the "P", that is now not visible as I have
applied -3px left to the div container.
I already tried to set the margin and padding to 0px to make sure the
text would start right at the beginning of the div, but I have a
gutfeeling it has to do with the "em"box ?

Or do you mean before the E?