SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2010
    Location
    Vancouver WA.
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background-image and Background-color issues

    Hi

    I am trying to create a tableless layout with CSS and I have a problem. Here is my CSS

    body
    {
    margin: 0px;
    padding: 0;
    font-family: 'Calibri', Arial, San-Serif;
    font-size: small;
    background-color:#ffffff;
    color:#444;
    background: fixed;
    background-image:url(pix/bkgrdgrayfade.gif);
    background-repeat: repeat-x;
    }


    #container
    {
    width:950px;
    margin:10px auto;
    background-color:#FFFFFF;
    }

    #globalNav
    {
    padding: 0;
    margin: 0;
    background-color:#000000;
    color: #cccccc;
    }



    #contentL
    {
    margin:0em 0em 0em 0em;
    padding:0em 0em 0em 0em;
    width:153px;
    float:left;
    background-color:#FFFFFF;
    height:1200px
    }


    #contentC
    {
    margin:0em 0em 0em 0em;
    padding: 0em 0em 0em 0em;
    float:right;
    width:790px;
    border-left:thin gray solid;
    background-color:#FFFFFF;
    }

    #foot
    {
    float:right;
    }



    contentL, contentC, globalNav and foot are nested within container and container is nested within body.

    I'm trying to set the background-color of the container element to white so that even though the heights of contentL and contentC are different, there will still be a uniform white background.

    For some reason it is not working. columnL is shorter than columnC (as expected). As a result, the image that I've assigned to the body tag appears at the bottom of columnL and goes to the bottom of the page. I would like it to be only white. This happens even though both columnL and columnC are nested withing container and container's background-color is set to white.

    Here is (generally) my DIV and HTML tag structure in the page

    <html>
    <body>
    <div id="container">
    <div id="globalNav">
    </div>
    <div id="contentL">
    </div>
    <div id="contentC">
    </div>
    <div id="foot">
    </div>
    </div> <!-- closes container tag -->
    </body>
    </html>


    Any recommendations would be great. I'm trying to create a tabless design.

    Thanks
    M66

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Try giving the container overflow:hidden to enclose the floats. The parent is probably just collapsing. Untested though.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Member
    Join Date
    Sep 2010
    Location
    Vancouver WA.
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ryan,

    That worked. Thanks for the solution! I was looking all over for it and couldn't figure it out.

    Thanks again.

    Michael Randall

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Glad it worked . You're welcome.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

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