bottom-aligning a DIV

You can do them with table cells...

[tfitzg]

Hi folks. First message on the board, thought I should start out with a bang of a question:

Horizontally you can align a div...

right align...

<div style="border: 1px solid black; width: 50%;">
<div style="border: 1px solid black; width: 20%; margin-left: auto; margin-right: 0px;">
TESTING
</div>
</div>

centered...

<div style="border: 1px solid black; width: 50%;">
<div style="border: 1px solid black; width: 20%; margin-left: auto; margin-right: auto;">
TESTING
</div>
</div>

But how about veritcally?

<div style="border: 1px solid black; height: 500px;">
<div style="border: 1px solid black; margin-top: auto; margin-bottom: 0px;">
TESTING
</div>
</div>

Any thoughts? Trying to keep clean, stay away from tables, but the dark side is getting awfully tempting...

Doesn't have to work in NN4, or even IE5... IE6 would be necessary at least! Thanks in advance!

[bibbouk]

If your div has a fixed height then it is easy to do you simply need to set the margin-top to be half the height of the div. Otherwise I think you'll have to use tables.

------------------
Mark Johnson

[edited by: Marcia at 11:51 pm (utc) on Sep. 13, 2002]
[edit reason] no sig URLs, please [/edit]

[gph]

<div style="border: 1px solid black; height: 500px; position: relative;">
<div style="border: 1px solid black; position: absolute; bottom: 0px;">
TESTING
</div>
</div>

or by itself

<div style="border: 1px solid black; position: absolute; bottom: 0px;">
TESTING
</div>

I'm pretty sure bottom positioning isn’t supported by the W3C but then again neither are table layouts.

[mivox]

It seems like it should be do-able with relative positioning... just position the footer div top:1px in relation to the content div. I'm not exactly sure how though, because relative positioning isn't something I've used alot.

[pageoneresults]

I utilize a footer include and place it at the end, inside of my main content div.

[mivox]

That's what I suggested in another thread, but someone pointed out it won't span the full page width if you have a sidebar div next to your content div.

One of these days, I will have to sit down and try to puzzle out a few alternative solutions for this one.