SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    100% height problem in css

    This is my css doc

    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    color: #EEEEEE;
    background-color: #000000;
    text-align: center;
    margin: 0px;
    padding: 0px;
    height: 100%;
    }
    #holder {
    width:100%;
    background:#fff;
    margin: 0 auto;
    margin-top:120px; /*space for header */
    text-align: left;
    margin-bottom:-20px;
    min-height:100%;
    }
    #header {
    height: 120px;
    position:absolute;
    width:100%;
    top: 0;
    left: 0;
    }
    #nav {
    width: 140px;
    float: left;
    height:auto;
    border:1px solid #888888;
    background:#AAAAAA;
    }
    #content {
    margin: 0 160px 40px 160px;
    padding: 15px;
    position:relative;
    z-index:3;
    border:1px solid #888888;
    background:#AAAAAA;
    height:auto;

    }
    #footer {
    position:relative;
    clear: both;
    height:20px;
    width:100%;
    background:#AAAAAA;
    z-index:1;
    float:none;
    }
    #ad {
    float:right;
    width:140px;
    border:1px solid #888888;
    background:#AAAAAA;
    height:auto;
    }

    for some reason i cant get the height of the content, nav, and ad to fit 100% of the space its given

  2. #2
    SitePoint Addict
    Join Date
    Aug 2005
    Location
    Belgium
    Posts
    387
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it wold help if youpost your xhtml too, and a live example would beperfect :P

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Have a look at the faq on 100% height as I expect you are trying to do something that can't be done. Elements in css will not automatically expand to 100% height of the parent unless the height is defined specifically (and not as a percentage when the parent is a fluid height). 100% of a fluid height container collapses to height auto.

    If you are looking for equalising columns then look at the 3 col demo sticky thread which explains come advanced techniques to do this but also has some simpler ones using background images to imitate a column.


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
  •