SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: image

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image

    I'm trying to put a img on #mainContent and it works then the .centerContent still works then #rightSidebar and the bg img will not show. Could some tell me what I'm doing wrong?


    <style>
    #mainContent {
    background-image: url(images/innerwrapper.png);
    background-repeat: repeat-y;
    }
    .centerContent {
    width: 620px;
    float: left;
    padding-bottom: 20px;
    }
    #rightSidebar {
    padding-bottom: 20px;
    padding-right: 5px;
    width: 250px;
    float: right;
    }
    </style>
    </head>
    <body>
    <div id="mainWrapper">
    <div id="headerWrapper"></div>
    <div id="nav"></div>
    <div id="mainContent">
    <div class="centerContent"> </div>
    <div id="rightSidebar"> </div>
    </div>
    </div>
    </body>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    I'm not quite sure what you are asking but you do need to clear your floats or the mainConent will have no height because floats are removed from the flow.

    Add overflow:hidden here:

    Code:
    #mainContent {
    	background-image: url(images/innerwrapper.png);
    	background-repeat: repeat-y;
    overflow:hidden
    }
    If you need visible overflow then use another clearing technique as documented in the css faq on floats (see my sig).

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks the overflow:hidden worked. Heading over to read now thanks for the link.


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
  •