Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Apr 2006
    Posts
    111
    Thanks
    0
    Thanked 2 Times in 2 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; 04-13-2009 at 09:53 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You'd need to adopt the faux-column approach.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •