SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 column centered design with fluid height help

    Hi all. It's my first time here and I'm hoping you can help me out. I have a design that a friend would like me to make into a web page, but working out a layout strategy is causing me a few problems.

    I need to have a 3 column layout. The central column will be fixed width and will contain the content. The left column needs to display a background image aligned to the right, and the right column needs a different background image aligned to the left. No problem your thinking - but here's the kicker: I need the height of the layout to display according to the amount of content in the central div.

    It's that final point that's giving me problems. I've put the code for a few solutions that I've found below. Does anyone know of any way that I can adapt either of these to work the way that I want them to (with no fixed heights on the divs)?

    Essentially I'm looking for a layout that will look like a table, act like a table but isn't a table. Using a table would be a last resort, so I'm hoping someone has a possible solution that will work cross browser.

    Solution 1
    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">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body {
        min-width: 1200px;
        margin:0;
        padding:0;
        background-position: top center;
    }
    
    #left-side-outer {
        width:50%;
        float:left;
        margin-right:-400px;
        height: 800px;
    }
    #left-side{
        margin-right:400px;
        background-color: #FF9900;
        height: 800px;
    }
    #center-column {
        width:800px;
        float:left;
        color: #FFFFFF;
        background-color: #000000;
        position:relative;
        z-index:10;
        height: 800px;
    }
    #right-side-outer {
        width:50%;
        float:right;
        margin-left:-401px;
        height: 800px;
    }
    #right-side {
        margin-left:400px;
        height: 800px;
        background-color: #FF9900;
    }
    #header{
        clear:both;
        height: 175px;
        text-align: center;
        background-color: #CC0000;
    }
    </style>
    </head>
    <body>
    <div id="header"></div>
    <div id="left-side-outer">
    <div id="left-side">
    </div>
    </div>
    <div id="center-column">Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered
    fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : </div>
    <div id="right-side-outer">
    <div id="right-side">
    </div>
    </div>
    </body>
    </html>


    Solution 2
    Code:
    <html>
    <head>
    <title>3 Column | Left/Right Fluid - Center Fixed</title>
    
    <style type="text/css">
    html, body {
    margin: 0;
    padding: 0;
    }
    
    body {
    text-align: center;
    }
    
    #content {
    width: 800px;
    height: 750px;
    margin: 0 auto;
    text-align: left;
    background: #CCCCCC;
    overflow:auto;
    }
    
    .column {
    width: 50%;
    position: absolute;
    top: 0;
    }
    
    .left {left: 0;}
    .right {right: 0;}
    
    #leftcol {
    margin-right: 400px;
    background: #0099FF;
    height: 750px;
    
    }
    #rightcol {
    margin-left: 399px;
    background: #0099FF;
    height: 750px;
    }
    </style>
    
    </head>
    <body>
    
    <div id="content"><h1>content <a href="#">This is a link</a></h1></div>
    
    <div class="left column">
    <div id="leftcol">left column</div>
    </div>
    
    <div class="right column">
    <div id="rightcol">right column</div>
    </div>
    
    </body>
    </html>
    Thanks in advance for any help with this.

    Chris

  2. #2
    SitePoint Member
    Join Date
    May 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Although it would still be cool to get an answer to the above question, I've now figured out a way to restructure the background image so the above layout isn't necessary.

    If you've got some free time though I'd still be interested to see if the above layout is possible

    Cheers,
    Chris

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, for the left and right column layout, would the background image be clipped if the middle content layer isn't big enoguh?

    If so, I'd be inclined to absolutely position the left and right columns, and then just position the middle column accordingly, that way the height is only based on the middle column
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •