Web Analytics Made Easy -
StatCounter Problem with divs and 100% height - CodingForum

Announcement

Collapse
No announcement yet.

Problem with divs and 100% height

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Problem with divs and 100% height

    I'm trying to make a layout but for some reason the side bars are extending past the middle content div and i have no idea whats wrong. If you have a solution that you can simply explain yourself i'd be happy to hear it. Thanks.

    I solved the problem on my own by making div1 the content and floating center with 58% width, instead of using it as the container. Then I made a blank container to center everything but thanks anyway

    Link is here http://www.freewebs.com/clan-aad

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Our Site: Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
    
    html {
    height:100%;
    width:100%;
    }
    
    body {
    height:100%;
    width:100%;
    background:#000000;
    margin:0px;
    padding:0px;
    font-family:helvetica;
    font-size:12px;
    font-weight:bold;
    color:#FFFFFF;
    }
    
    #div1 {
    position: relative;
    height:100%;
    width:800px;
    background:#F2F2F2;
    margin:auto;
    color:#000000;
    }
    
    #header {
    width:100%;
    height:30%;
    background:blue;
    color:#000000;
    margin-top:0px;
    }
    
    #navbar2 {
    position:relative;
    float:right;
    width:21%;
    height:100%;
    background:green;
    color:#000000;
    }
    #navbar1 {
    position:relative;
    float:left;
    width:21%;
    height:100%;
    background:green;
    color:#000000;
    }
    </style>
    </head>
    <body>
    
    <div id="div1">
    
    <div id="header">
    
    </div>
    
    <div id="navbar1">
    
    </div>
    
    <div id="navbar2">
    
    </div>
    
    </div>
    
    </body>
    </html>
    Last edited by SKY-ProToSs; Apr 13, 2009, 04:53 PM.

  • #2
    You'd need to adopt the faux-column approach.
    Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

    Comment

    Working...
    X