SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS question for div background color

    I'm working on a site at www.callbrady.com/restore2

    The owner wants a background color on the left side navigation to connect all the way from header to footer. I've tried a few different techniques, but am not getting it. I was hoping that by setting the navigation div height to 100% that I'd get somewhere, but alas did not.

    I appreciate any feedback you can provide!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You can never use height:100% in any meaningful manner apart from on the html and body elements to establish a 100% starting point. The css FAQ on 100% height (see my sig) explains the why and wherefore so I won't go into full detail here but the basics are that you can only set a percentage height on a parent that has a known height and doesn't depend on its content for its height.

    Therefore 100% height is a non starter because even if it does work then it is limited to 100% and will never grow. The similar applies to min-height:100% in that it only works on a parent that has a height defined or else it just defaults to height:auto. In any case you don't want 100% you want something that starts from here and goes all the way to there - which is not 100% of anything.

    The techniques you can use are faux columns (use a repeating background image on the main container to create the illusion of a column); use display:table for ie8+ and create css table cells which can equalise; use one of the negative margin float techniques; or use an absolute overlay.

    If you only want to support IE8 plus you can do the absolute overlay method without adding any mark up:

    Code:
    #container{
    position:relative;
    }
    #container:after{
    content:".";
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
    }
    #container:before{
    content:" ";
    display:block;
    position:absolute;
    left:10px;
    top:280px;
    bottom:37px;
    width:220px;
    background:red;
    z-index:1;
    }
    #navigation{position:relative;z-index:2;}
    Hope that helps

    BTW your main container has no height because you didn't contain the floats.

  3. #3
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm nearing completion on this project and about to turn if over to another person for updates. I notice that on the web everything looks good, but in Dreamweaver it is ALL OVER THE PLACE, especially in the navigation and content areas. Any ideas?

    Dreamweaver shows the navigation in the top right area of the page, and the content in the lower left area.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bradyg23 View Post
    I'm nearing completion on this project and about to turn if over to another person for updates. I notice that on the web everything looks good, but in Dreamweaver it is ALL OVER THE PLACE, especially in the navigation and content areas. Any ideas?

    Dreamweaver shows the navigation in the top right area of the page, and the content in the lower left area.
    Dreamweaver can only handle all but the simplest of CSS and design view should never be used as a guide. In fact "don't ever use design view" but work in "code view" only and preview the code in a real browser (multiple browsers in fact) every time you update a section of code.

    Dreamweaver has a good code editor but most of the time its wysiwyg is in fact wysiwtf

  5. #5
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good advice.
    WYSIWTF... I laughed... Never heard that one before.


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
  •