3 column centered design with fluid height help

HTML & CSS
1

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


<!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


<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

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 :slight_smile:

Cheers,
Chris

3

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 :slight_smile: