SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using DIVs To Make BGColor Work

    My test site is: http://ae.windridgewebdesign.com/

    In this Wordpress driven site, if the sidebar isn't as long as the content, the bgcolor will not go all the way down. I added another div and made the bgcolor the same as my sidebar bgcolor so that the column goes all the way to the bottom. This looks like how I want it to on the homepage.

    However, if you go to an interior page that isn't as long as the sidebar, you get the sidebar bgcolor on the main content side. I have tried a ton of different things to try to get it to work, with no luck. I really don't want to use BG images if I can avoid it.

    Any ideas?

  2. #2
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An option you could try is to set the "main" height to 100% and the sidebar height to 100% also, which would force it to stretch across the entire length of the main container

  3. #3
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    You need to set all div's from html down to min-height: 100%
    Ryan B | My Blog | Twitter

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, but still no luck.

  5. #5
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I put together a very simple and rough example to illustrate my point:
    Code:
    <html>
    <head>
    
    <style type="text/css">
    #header
    {
    width:100&#37;;
    height:100px;
    background:#ff0000;
    }
    
    #main
    {
    width:100%;
    height:100%;
    background:#000000;
    }
    
    #content
    {
    width:400px;
    height:100%;
    background:#ccff00;
    float:left;
    }
    
    #sidebar
    {
    width:100px;
    height:100%;
    background:#ffcc00;
    float:left;
    }
    </style>
    
    </head>
    <body>
    
    <div id="header">
    </div>
    
    <div id="main">
    
    <div id="content">
    Lorem Ipsum<br/>
    Lorem Ipsum<br/>
    Lorem Ipsum<br/>
    </div>
    
    <div id="sidebar">
    </div>
    
    
    </div>
    
    </body>
    </html>
    You might want to consider that it is your markup that needs to be rewritten for your CSS to do what you want it to do....
    Last edited by Paul O'B; Oct 22, 2010 at 14:57. Reason: code tags added

  6. #6
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Which elements did you apply it to?

    Try
    Code CSS:
    html, body, div.hfeed, div#wrapper,
    div#main, div#sidebarbg, div#container,
    div#content { min-height:100&#37;; }
    put that at or near the top of your css
    Ryan B | My Blog | Twitter

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will play more with the markup. I realize there may be some changes that need to be made there. But I am trying to do it with a Wordpress theme so finding everything in the right spot without messing up other things is the tough part.

    As for the CSS, I have added the min-height everywhere, but no luck.

  8. #8
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    There is nothing truely special about WP, it is still a simple page split up... so if you are that hung up on it being a theme, open a page, save it locally and mess with it. once you got it to work, see what changes you made and plug them into the correct theme files.

    I don't mean that rudely.
    Ryan B | My Blog | Twitter

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

    Sorry guys but you are all barking up the wrong tree here and that approach won't work

    Quote Originally Posted by TommiChi
    I put together a very simple and rough example to illustrate my point:
    That won't work at all I'm afraid as you cannot set any fluid elements to 100&#37; height because that means that first they must have a parent with a known height (not content height) and if indeed they do have a parent of known height then you have effectively trapped your content in a 100% high container that can never expand. Just add content to go below the fold in any of your columns to see why this won't work.

    The CSS faq explains 100% height in detail and why you can never use it like this.

    You may think that you could use min-height:100% instead but that won't work either for multiple nested elements. You can effectively only ever have one min-height:100% nested element as a child cannot base its height on a parent that is defined by min-height - the height collapse to auto. You could have separate (non nested) elements basing their height off html,body set to 100% but that won't mean that the columns will equalise. It just means that initially they will extend to the bottom of the view port but when one grows the others won't follow and you are back to square one . It's a catch 22 situation.

    Read my article on equal columns for a better understanding.

    The easiest solution is to create a background gif in the side columns color and just repeat it on the parent that is holding both columns (the image would be as wide as the side column and about 10px high. You should also include the side border on the column). Give that parent a background color also and you will get your two equal columns very easily (called faux columns).

    The other alternatives are negative margin techniques that complicate the mark up a little or my absolute column overlay technique which means adding extra mark up.

  10. #10
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, Paul. Thanks for taking the time to write such a detailed response. That is great information and wonderful links. Cheers.

  11. #11
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul -

    I must be doing something wrong. I have cleaned up my markup and added the bg image to the parent, but it isn't showing up. I have looked at it every which way and can't figure out why it isn't there. I tried to change a few attributes to make it easier to identify, but still can't seem to get it.

    Any ideas?

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The path to the image is wrong.

    Code:
    #main {
    background:url("sidebarbg.gif") repeat-y  right top
    The image seems to be here.

    Code:
    #main {
    background:url("/sidebarbg.gif") repeat-y right top

  13. #13
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OMG, thanks. I am embarrassed. I must have overwritten the / by accident. Thanks again. Working like a charm now.


Tags for this Thread

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
  •