#1
  1. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jan 2004
    Location
    Budapest
    Posts
    1,702
    Rep Power
    67

    CSS Layout Help Please


    I am having a hard time grasping this and would really appreciate some help. I think if you look at this code, my problem is obvious. I want a layout with a nav column down the left side, a banner area, and a content area. I have played around with this for hours, tons of trial and error. I almost had it in IE, but in NS it looks like crap. Also, in the container <div> that someone kindly gave me, what is the -350px do? Here is my code, thanks so much.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type"
    content="text/html; charset=ISO-8859-1" />

    <title>Full Height</title>
    <style type="text/css">
    /*<![CDATA[*/

    body {
    height: 100%;
    margin: 0;
    }

    #container {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -350px;
    width: 700px;
    height: 100%;
    background-color: #fff;
    border: 1px solid red;
    background-image: url('images/keybg.jpg');
    background-repeat: no-repeat;
    }
    #nav{
    width:135px;
    position:absolute;
    background-color:#000;
    left:0px;
    height:100%;
    float:left;
    clear:right;
    top:0px;
    margin-top:0px;
    }
    #banner{
    width:565px;
    position:absolute;
    background-color:#f00;
    left:135px;
    height:125px;
    float:right;
    }
    #content{
    width:565px;
    position:absolute;
    margin-top:125px;
    background-color:#00f;
    left:0px;
    height:100%;
    float:right;
    clear:left;
    }

    /*]]>*/
    </style>
    </head>

    <body>
    <div id="container">

    <div id="nav">
    </div>
    <div id="banner"
    </div>
    <div id="content">
    </div>
    </div>

    </body>
    </html>
    Today the world, tomorrow the universe...
  2. #2
  3. Bites when cornered
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Back from Iraq!
    Posts
    109
    Rep Power
    13
    When you I use position absolute, I avoid using the float property as it can create a conflict: Should it float, or should it be where you put it? Also, the order of your div's matter because it determines the z order, for instance your nav bar is there, but it is actually covered by your container area (due to the left: 0px;). Negative margins do not have any effect, either. In the html, you left a > off of one of your divs, BTW. I think this may be what you were looking for:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type"
    content="text/html; charset=ISO-8859-1" />
    
    <title>Full Height</title>
    <style type="text/css">
    /*<![CDATA[*/
    
    body {
    height: 100%;
    margin: 0;
    }
    
    #container {
    position: absolute;
    top: 0;
    left: 0;
    width: 700px;
    height: 100%;
    background-color: #fff;
    border: 1px solid red;
    background-image: url('images/keybg.jpg');
    background-repeat: no-repeat;
    }
    #nav{
    width:135px;
    position:absolute;
    background-color:#000;
    left:0px;
    height:100%;
    top:0px;
    }
    #banner{
    width:565px;
    position:absolute;
    background-color:#f00;
    left:135px;
    height:125px;
    }
    #content{
    width:565px;
    position:absolute;
    background-color:#00f;
    left:135px;
    top: 125px;
    height: 100%;
    }
    
    /*]]>*/
    </style>
    </head>
    
    <body>
    <div id="container">
    
    <div id="nav">
    
    </div>
    <div id="banner">
    
    </div>
    <div id="content">
    </div>
    </div>
    
    </body>
    </html>
    Please note that there is a small issue: The content area overflows the container because height: 100%; refers to 100% of the container's height, and then the top: 125px; moves it down. I am not too sure of how to make it take the remaining area unless you specify pixel sizes for the container and content areas...


    HTH
    Obstruct the doors, cause delays, be dangerous.
  4. #3
  5. No Profile Picture
    Standards User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    146
    Rep Power
    12
    Don't know if it really helps your issue or not, but
    Code:
    <div id="banner"
    isn't closed. It should be
    Code:
    <div id="banner">
    While they can be confusing at first, you're on a path to a happier place. Check out these links for some simple tutorials that should get you where you want to go.
    http://www.google.com/search?q=Table-less+layout+CSS
    http://glish.com/css/
    http://www.alistapart.com/articles/journey/
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    I believe that's some of my code you're basing everything on.

    First, the -350px for the margin, is a centering hack for absolute positioned boxes in both IE and good browsers. left is set at 50%, then the left margin is set at &minus; &frac12; the width to create a centered box.

    Second, I believe you need to expand your base knowledge about CSS positioning. I recommend the articles at /*PIE*/ for a clear explanation.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jan 2004
    Location
    Budapest
    Posts
    1,702
    Rep Power
    67
    Thanks all of you for your help, I have bookmarked the tutorials referenced. I played with the code above and noticed that when ever the div-content had any type of padding, margin or top applied, it would push it down below the nav div. I then thought I had it solved by nesting div in the content div and putting a top on that. That seemed to work until I filled that nested div with content, the result of which you will see here -

    http://tmh.netdbs.com/turnkey/full_height1.htm

    Any further suggestions. I think it should be obvious as to my problem, the nav bar doesn't go 100% When you have a div in a parent block, such as this one - div container- whose height is set to 100%, why does it not "stretch" to accommodate something like my nested div content2? I am having hard time grasping this... Thanks again.
  10. #6
  11. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    Please don't just bookmark the articles. Study them. They will explain and answer the questions you have.

    In a nut-shell, absolutely positioned (AP) elements do not exist in the flow. They exist in the parent container only in terms of position relationships and relative sizing. AP elements cannot extend the parent element because they are not in the parent element.

    To illustrate, try this;
    Code:
    <div style="position: relative; border: 1px solid black; padding: 5px;">
    
    <div style="position: absolute; width: 45%; border: 1px solid blue;">
    some<br />abslutely<br />positioned<br />text<br />
    </div>
    <div style="margin-left:50%;"><p>some content</p></div>
    </div>
    
    <p><br /><br /><br /><br /><br /></p>
    
    <div style="position: relative; border: 1px solid black; padding: 5px;">
    <p>some content</p>
    <p>some content</p>
    <p>some content</p>
    <p>some content</p>
    <p>some content</p>
    </div>
    See? the AP element does not push the parent container's lower edge. Play with this snippet, and RTFM

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jan 2004
    Location
    Budapest
    Posts
    1,702
    Rep Power
    67
    Thank you for your time, though I hate to ask what RTFM means. :-) I will study the links referenced
  14. #8
  15. Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    25
    Rep Power
    0
    Read The Fucking Manual
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jan 2004
    Location
    Budapest
    Posts
    1,702
    Rep Power
    67
    Such language, I'll tell ya. I have the O'Reily book by my side and am doing just that
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jan 2004
    Location
    Budapest
    Posts
    1,702
    Rep Power
    67
    not only did i btfm, I rtfm. Thanks so much for all our help, this is what I was looking for, hopefully someone will benefit from this post as I did.

    http://tmh.netdbs.com/turnkey/default.htm

IMN logo majestic logo threadwatch logo seochat tools logo