[Stickman]

Has anyone figured out a way to create a div which is a vertical column the full height of the page? I want to use a div (as a frame for the content) that runs from the top to the bottom of the page.

With tables, you would do it like this:

[code:1:a5faf1e221]<table width=625 height=100% padding=0 cell-padding=0 cell-spacing=0>[/code:1:a5faf1e221]

But I don't want to create a page in pure xhtml and css and then [b:a5faf1e221]have to nest the whole buggering thing in a table[/b:a5faf1e221]. :x

Thanks in advance for any help...

[Stickman]

[b:f5d05a3880]Public Notice:[/b:f5d05a3880]
This problem has now been resolved. There is nothing to see here. Please go back inside.
Thank you shunk.

[Bill Posters]

It really is worth posting the solution so that others who may read this thread looking for the answer to the same problem can find out how to correct it.



It doesn't bode well for this forum when people are relying on (and sent to) solutions posted on other fora.

Post the solution here too.

[Stickman]

You're a picky bastard, aren't you?
They can click the link. It opens in a new window anyway - people don't have to leave.

Anyway, to support this forum, here goes...
The answer I've ended up with after help from [size=9:c3947e54a5](somewhere else - shhh!)[/size:c3947e54a5] was to use a div with the following style:
[code:1:c3947e54a5]
text-align:left;
margin-left:auto;
margin-right:auto;
top: 0px;
bottom: 0px;
height: 100%;
[/code:1:c3947e54a5]

in a body with the following style:
[code:1:c3947e54a5]margin:0px 0px 0px 0px;
text-align:center;[/code:1:c3947e54a5]

This way seems to cater for most browser variations, but probably won't for all . You may want to fiddle, but the main thing is to specify that the height of the div is "100%" and that the distance of the div from the top/bottom of the page is "0" as well as the top and bottom page-margin.
The text-align:left in the div is to replace the text-align:center in the body which some browsers carry on and apply to the content in the div and some don't.

I'm sure there are many other browser issues (opera 6 leaves a gap at the top of the page unless you have marginheight=0 defined in the body tag of your html), but this is the best combination I've found so far.

Feel free to post any variations below.

[Stickman]

Dedicated to Bill Posters (and because we're having a lazy sunday and I'm waiting to watch 24), if you want to have a go at a similar layout try starting with this.

[Stickman]

Click here for the finished version (which validates). Its very plain so its an easy template to adapt for your own purposes.