SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centered, left/right panels with left/right panel hidden

    Sorry, second post as in as many days...

    Im looking to make a centered site, that has two columns (left and right) that contain images for background decoration and a content column.

    What i dont understand is how i can make the left/right columns have hidden overflow whilst preserving the centered effect and preventing the overall positioning div to show.

    learning from experience...ive done a little drawing!...it can be viewed here

    Many thanks to you all for your patience with me!

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you're after something like this.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Home</title>
    <style type="text/css">
    body {
        width: 760px;
        margin: 0 auto;
        background-color: #CCC;
    }
    #container {
        float: left;
        width: 760px;
        padding: 20px 0px;    
    }
    #navigation {
        float: left;
        width: 144px;
        border: solid #C00 1px;
        background: #FFF;
        margin: 0px 2px;
        min-height: 200px;
    }
    #content {
        float: left;
        width: 458px;
        border: solid #C00 1px;
        background: #FFF;
        min-height: 500px;    
    }
    #subcontent {
        float: left;
        width: 144px;
        border: solid #C00 1px;
        background: #FFF;
        margin: 0px 2px;
        min-height: 200px;
    }
    </style>
    </head>
    <body>
    <div id="container">
        <div id="navigation"></div>
        <div id="content"></div>
        <div id="subcontent"></div>
    </div>
    </body>
    </html>
    I've put min-height on each div just to show you how the height could be displayed (which won't work in IE6 and below) but I presume you'd allow the content to decide on the height anyway so this could be removed.

    Hope that helps?


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
  •