I am a complete newbie when it comes to CSS, only starting to look at it this week.

Anyway, I have a page with nothing on at the moment that I am just testing things out on. I managed to get a footer that goes all the way across the page right at the very bottom. Next I want a panel that goes right down the middle of the page from the very top to the very bottom.

Here is my page, I have the panel starting at the top but can't work out how to get it to go to the bottom, I have tried 100% height but that doesn't work. I would also like it to go over the footer. Please help

http://www.everlastingeye.co.uk/csstest/index.html

Thanks!

Here is what I have as css

/* CSS Document */

body {
margin: 0%;
font: 8pt/16pt verdana;
color: #555753;
background-repeat: repeat;
background-image: url(testback.jpg);
}

#container {
position: relative;
margin: 0 auto;
width: 200px;
text-align: center;
height: 100%;
margin-top: 0px;
border-left-width:thin
border-left-color: #666666;
border-right-color: #666666;
border-color: #666666;
background-color: #FFFFFF;
border-left-width: thin;
border-right-width: thin;
border-right-style: solid;
border-left-style: solid;
}

#footer
{
background: url(footer.jpg) repeat;
color: #fff;
height: 20px;
text-align: right;
line-height: 20px;
font-size: 11px;
bottom: 0px;
position: absolute;
width: 100%;
left: 0px;
}

Sorry it's impossible, you need to use faux. What you do is make your borders an images then put something like this

body {
	margin:0px;
	padding:0px;
	background:url(images/border.gif) repeat-y 50% 0;
}

Read more here http://www.alistapart.com/articles/fauxcolumns/

ok, thanks!