I have a css layout problem that I'm hoping someone can help out with. I have a design that a friend would like me to make into a web page, but working out a CSS 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
Solution 2
Thanks in advance for any help with this.
Chris
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" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<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