CSS Layout Problem

Hi all :)

This is a very newbieish problem. Basically, I want my fake frames to extend the whole hight and width of the page, but at the moment they are positioned nicely in the middle. Looks great, but isn't what I want. I was wondering if anyone could help me out? I've tried messing around with the code, but haven't had any luck yet. It's been years since I made sites, and they was in HTML, with only a touch of CSS, so yeah... lol

I've upped the res on my comp to show a screenie of the full page to try and explain futher what I'd like :) http://i9.photobucket.com/albums/a76/maspar/pagescreen.jpg

Thank you in advance!

Here's my code:

body {
background-color: #FFFF99;
}

{
text-align: center;
}

div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
}

{
text-align: center;
}

div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: left;
}

#container
{
width: 90%;
margin: 10px auto;
background-color: #fffff0;
color: #333;
border: 3px solid gold
line-height: 130%;
}

#top
{
padding: .5em;
background-color: #fffff0;
border-bottom: 3px solid gold;
}

#top h1
{
padding: 0;
margin: 0;
}

#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
}

#content
{
margin-left: 200px;
border-left: 3px solid gold;
margin-right: 200px;
border-right: 3px solid gold;
padding: 1em;
max-width: 36em;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #f5f5f5;
border-top: 3px solid gold;
}

#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

You have three separate css declarations for your container div; the last one is winning the battle. To go full screen you need to lose the width and margins in all three. Delete the css in red so it doesn't compete with the last one:

div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
}

{
text-align: center;
}

div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: left;
}


Next you want to delete the first two declarations of the remaining #container div and leave it looking like so: (they center it in the browser)

#container
{
background-color: #fffff0;
color: #333;
border: 3px solid gold
line-height: 130%;
}

That should take you full screen.

Gary

One more thing - add this to the beginning of your css so it eliminates all browser-specific margins and padding:

*, html, body {margin:0; padding:0}

GD

Thanks Gary, you rock! Nice simple explanation that made sense to me :thumbsup:

It worked like a charm, 'cept for the footer. It's still high and not touching the bottom of the page. I tried messing with #footer but didn't have any luck. Could I be a pain and bug you again?

This is the code as of now, like you said (I hope) and an updated pic :)

http://i9.photobucket.com/albums/a76/maspar/testscreen1.jpg

*, html, body {margin:0; padding:0}

body {
background-color: #FFFF99;
}

#container
{
background-color: #fffff0;
color: #333;
border: 3px solid gold
line-height: 130%;
}

#top
{
padding: .5em;
background-color: #fffff0;
border-bottom: 3px solid gold;
}

#top h1
{
padding: 0;
margin: 0;
}

#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
}

#content
{
margin-left: 200px;
border-left: 3px solid gold;
margin-right: 200px;
border-right: 3px solid gold;
padding: 1em;
max-width: 36em;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #f5f5f5;
border-top: 3px solid gold;
}

#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

You do realise that you can actually remove all of the margin: 0; from your CSS because the Universal Selector (the bit with the *) zeros out margin and padding on ALL elements, so you redefine it as you wantt.

As for the footer... it will not stretch the height because you have not asked it to. You will need to set the height to 100% on all of the elements that contain the footer, such as the html, body and container.

Thanks! The footer fits in nicely now :) Now let's see how long it takes for me to get stuck on something else... about 2 minutes after reading this I'd guess! ;)