SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast adaler1's Avatar
    Join Date
    Feb 2005
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Need help: Hybrid column layout within wrapper containers

    This is my first attempt at a table-less design without using absolute positioning for all the elements. What I'm trying to do is create 3 columns basically under the header. The difference between what I'm trying to do and the tutorial is that I'm wanting the outside box to contain 2 columns, 1 for nav and 1 for content. Then within the content div I want to split into two columns. This gives me the flexibility to just use the big content div or split that depending on the paticular page design. I'm having a little trouble with it. Seems my far left div for the nav keeps disappearing. When I do get it to show up the main content div doesn't float next to it and line up at the top. Can someone take a look and tell me where I've gone wrong? Thanks

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htp:www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <!--link href="style/home.css" hreflang="en" rel="stylesheet" type="text/css" /-->
    <style>
    body {
    margin:0px;
    background-color:#036;
    font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
    font-size:12px;
    color:#333;
    }

    p {
    padding:0px 4px 0px 8px;
    margin:2px 0px 8px 0px;
    }

    h1 {
    font-size:14px;
    font-weight:bold;
    color:#606;
    background-image:url(../images/util/h1.back.gif);
    background-repeat:repeat-x;
    padding:2px 0px 2px 8px;
    margin:0px;
    width:100%;
    height:23px;
    border-top:2px solid #999;
    white-space: nowrap;
    }

    #head {
    background-image:url(../images/util/header.back.gif);
    background-repeat:no-repeat;
    background-color:#fff;
    margin:0px 0px 0px 0px;
    padding:34px 8px 0px 0px;
    text-align:right;
    width:800px;
    height:198px;
    position:absolute;
    }

    #mainBody {
    background-color:#fff;
    margin:0px;
    padding:0px 8px 12px 0px;
    width:800px;
    min-height:100%;
    height:auto;
    clear:both;
    }
    * html mainBody {height:100%;}

    #navBox {
    background-image:url(../images/util/nav.back.gif);
    background-repeat:no-repeat;
    background-color:#fff;
    margin:0px;
    padding:14px 0px 0px 0px;
    width:132px;
    height:237px;
    vertical-align:top;
    float:left;
    }

    #content {
    top:0px;
    margin:0px;
    padding:8px 8px 8px 8px;
    width:666px;
    vertical-align:top;
    float:right;
    }

    #splitLeft {
    top:0px;
    position:inherit;
    margin:0px;
    padding:0px;
    width:364px;
    vertical-align:top;
    float:left;
    }

    #splitRight {
    top:0px;
    position:inherit;
    margin:0px;
    padding:0px;
    width:288px;
    border-left:2px solid #999;
    vertical-align:top;
    float:left;
    }
    </style>
    <title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>

    <body>
    <div id="head"><img src="images/banner.png" width="665" height="154" alt="" border="0" hspace="0" vspace="0" /></div>
    <div id="mainBody">
    <div id="navBox">something goes here</div>
    <div id="content">
    <div id="splitLeft"><h1>This is a test title</h1><p>Test</p></div>
    <div id="splitRight"><h1>Test title 2</h1><p>Test 2</p></div>
    </div>
    </div>
    </body>
    </html>
    Last edited by adaler1; Feb 22, 2005 at 14:35.

  2. #2
    SitePoint Enthusiast adaler1's Avatar
    Join Date
    Feb 2005
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Preview online

    Here's a preview online: http://www.dalerussell.com/KB/http://www.dalerussell.com/KB/
    and here's what I want it to look like: screenshot

  3. #3
    SitePoint Enthusiast adaler1's Avatar
    Join Date
    Feb 2005
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No one has any thoughts or sees something obvious I'm over-looking?

  4. #4
    SitePoint Enthusiast adaler1's Avatar
    Join Date
    Feb 2005
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool Updated, still a couple of bugs though

    Here's my updated CSS

    #head {background-image:url(../images/util/header.back.gif);background-repeat:no-repeat; background-color:#fff;
    margin:0px 0px 0px 0px;
    padding:34px 8px 0px 0px;
    text-align:right;
    width:800px;
    height:198px;
    clear:both;
    }

    #mainBody {
    background-color:#fff;
    margin:0px;
    padding:0px 8px 12px 0px;
    width:800px;
    min-height:100%;
    height:auto;
    }
    * html mainBody {height:100%;}

    #navBox {
    background-image:url(../images/util/nav.back.gif);background-repeat:no-repeat; background-color:#fff;
    margin:0px;
    padding:14px 0px 0px 0px;
    width:132px;
    height:237px;
    vertical-align:top;
    float:left;
    clear:none;
    }

    #content {
    margin:0px;
    padding:0px 0px 0px 8px;
    width:658px;
    float:right;
    }

    #splitLeft {
    margin:0px;
    padding:0px;
    width:360px;
    float:left;
    clear:none;
    }

    #splitRight {
    margin:0px;
    padding:0px;
    width:278px;
    border-left:2px solid #999;
    float:left;
    }

    But I have a large gap between the #head and the #maincontent divs, any ideas? All my padding and margins appear to be correct...?

    Also, in Mozilla (PC), the #mainBody div doesn't stretch down but I'm using the min-height and all?

    Lastly, I had to shrink my two split columns into 360 and 278 pix (total of 638) to get them to stop breaking, but the width of my #content div is 658... where is the other 20px going? Padding and margins are set to 0 for everything except 8px of padding on the left of the #content div. Still 12px unaccounted for?

    I've updated the files on my server so you can see what's going on. I'd really appreciate one of the gurus (Paul O'B or anyone?) to take a look. Thanks

  5. #5
    SitePoint Enthusiast adaler1's Avatar
    Join Date
    Feb 2005
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well since no one else could spare the time I've managed to figure out most of it myself.

    For the large gap I put in a negative top margin on my #mainBody to get -34px, which offsets the TOP padding of 34px I gave the #head. If anyone wants to tell me why that happens I'd appreciate understanding.

    To get the white background color of the #mainBody to stretch in mozilla I added overflow:hidden. To me that seems opposite of what I want to happen, but it works.

    I still haven't figured out the difference in widths, but perhaps it's from the broken box model? I haven't gone back to add up all the margins and paddings to see if I calculated out css1 or css2 when I was putting in the numbers but it looks fine now so that's what matters unless someone wants to verify for me.


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
  •