Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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

    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; }

  • #2
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    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:

    Code:
    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)

    Code:
    #container
    {
    background-color: #fffff0;
    color: #333;
    border: 3px solid gold
    line-height: 130%;
    }
    That should take you full screen.

    Gary

  • #3
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    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

  • #4
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Gary, you rock! Nice simple explanation that made sense to me

    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



    *, 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; }

  • #5
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #6
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •