text allign bottom right of div

da_mic_1530 · 31 Mar 2009 at 13:02

sorted, just padded the text down in the end

EvilOne · 31 Mar 2009 at 14:36

padding is cheating

probedb · 31 Mar 2009 at 15:17

EvilOne said:
padding is cheating

<div id="FooterDiv" style="text-align:right;">

Inline styling is bad

EvilOne · 2 Apr 2009 at 09:49

probedb said:
Inline styling is bad

Better then padding lol

Dj_Jestar · 2 Apr 2009 at 13:24

Code:

div {
  text-align: right;
  vertical-align: bottom;
}

da_mic_1530 · 3 Apr 2009 at 10:20

that was my first try Dj_Jestar, wasn't working so there was something mucking up the code then

That's why I had to ask as I had already tried that, never mind eh

Dj_Jestar · 3 Apr 2009 at 10:40

is the text within a span or p inside the div? i.e. is it this

Code:

<div><p>blah</p></div>

or this

Code:

<div>blah</div>

?
The div may also need a height set.

da_mic_1530 · 3 Apr 2009 at 20:27

The div had a set height, a background image, a width

Then it was

<div><p>lalala</p></div>

With this css you wrote about, and that just put it to the right, not the bottom-right

tsinc80697 · 3 Apr 2009 at 20:37

div {position:relative;}
p {position: absolute; right: 0; bottom: 0}

Dj_Jestar · 3 Apr 2009 at 22:14

Not sure that would work? absolute inside a relative will float, won't it?

suarve · 3 Apr 2009 at 22:20

wow, some some people are making this over complicated

tsinc80697 · 4 Apr 2009 at 00:00

Positioning an element absolutely takes it out of the element stack/flow.
An absolutely positioned element will be positioned at the specified coordinates relative to its containing block.
You can define the containing block by giving a parent div a position of relative.

If you just want the paragraph to be in the bottom right of a div then use what I said above, and shown below :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="">
<head>
<meta http-equiv="content-type" content="text/html; charset=" />
<title></title>
</head>
<body>
<div style="border: 1px solid red; width: 800px; height: 500px; position: relative;">
<p style="border: 1px solid black; position: absolute; bottom: 0; right: 0; width: 300px;">
Donec non lectus. Nullam ut ante. Sed ut mauris. Proin tempus condimentum ante. Mauris risus felis, lacinia eleifend, consequat in, tincidunt vitae, magna. Donec ut felis. Curabitur dictum ante ut dui. Proin nunc augue, sagittis ac, consequat nec, ultrices volutpat, purus. In varius felis in dolor. Phasellus ipsum lectus, sollicitudin et, elementum id, congue sed, ligula.
</p>
</div>
</body>
</html>