How do i achieve the following layout . . .

Associate
Joined
20 May 2007
Posts
441
Hey every1

The page will have a header at the top, a footer at the bottom of the main content and the main content will be obviously fill the space in the middle.

Now the hard bit I can't seem to get is the following situation . . .

If the page's content isn't enough to fill the screen, i want the header still at the top, the footer at the bottom of the screen and the main content to be centred between the header and the footer.

Is it possible to do this with CSS or do i need to use some javascript or anythin?

Im totally lost as to whether this can be achieved

Thanks for any help
Gaunt
 
Cheers got the header and footer in the right place now just struggling to get the my content div to expand to the space between the header and the footer and hopefully it'll work :-S

Heres what I got so far

html{
height:100%;
}

body{
margin-left:auto;
margin-right:auto;
width:1000px;
height:100%;
}

#container{
min-height:100%;
}

.pageheader{
background-image: url("images/header.png");
background-repeat: no-repeat;
background-position: top center;
width:100%;
height:110px;
}

.pagecontent{
width: 900px;
height:100%;
margin-left: auto;
margin-right: auto;
vertical-align:middle;
}

.footercontainer{
width:100%;
height:auto;
position:absolute;
bottom:0px;
left:0px;
}


its just the pagecontent div that wont centralise, any ideas where I'm going wrong?

EDIT: The page still wont put footer at the end of the page content if it goes past the viewport, Im doing something very wrong here aren't I lol

Gaunt
 
Last edited:
Back
Top Bottom