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 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2010
    Posts
    20
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Noob Background Color Issue

    Hey guys, having a bit of a problem with my page im trying to create and the background colors etc.

    The html is basically this
    Code:
    <div id="container">
       <div id="left">content</div>
       <div id="right">content</div>
    </div>
    and the css is
    Code:
    body{
    background:#000
    }
    
    #container{
    background:#fff
    width:720px
    height:100%
    }
    
    #left{
    float:left;
    width:200px;
    height:100%;
    background:#333
    border:3px solid #444
    }
    
    #right{
    float:right;
    width:500px;
    height:100%;
    }
    Now thats just a quick copy, theres a lot more to it obviously but thats the principle of it. Now my body background is correct and the container background is correct but the background color of the #left div is not showing up its showing up as the containers color, however the border of the #left div shows up fine.

    Any ideas?

    Thanks.

  • #2
    ee8
    ee8 is offline
    New Coder
    Join Date
    Dec 2009
    Posts
    14
    Thanks
    2
    Thanked 1 Time in 1 Post
    I'm no expert, and don't really know CSS at all, but your colors only have 3 characters... like fff.. as far as I've ever known, it needs to be 6.. like ffffff.

    Obviously, I could be wrong, maybe CSS uses just 3, idk.

  • #3
    New Coder
    Join Date
    Feb 2010
    Posts
    20
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Depends what colors, #fff is sort for #ffffff and #000 is short for #000000 etc.

  • #4
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Here is revised code. Whit background was not showing up in container div because #left and #right divs are being floated, and therefore taken out of document flow. Since there was no content being rendered in #container, the background color wasn't visible. I defined the height with a specific dimension to bypass this issue.

    Here is a good site that can help you find another solution. I had a link to solve this issue another way, but am unable to dig it up at the moment.

    Code:
    <style type="text/css">
    
    body {
    background:#000;
    }
    
    #container{
    background:#fff;
    width:720px;
    height:200px;
    }
    
    #left{
    float:left;
    width:200px;
    height:100%;
    background:#333;
    border:3px solid #444;
    }
    
    #right{
    float:right;
    width:500px;
    height:100%;
    }
    </style>
    
    <div id="container">
       <div id="left">content</div>
       <div id="right">content</div>
    </div>
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #5
    Nim
    Nim is offline
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Green

    Where I can find information about html for green students?


  •  

    Posting Permissions

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