...

View Full Version : CSS 3 Column Layout question



jamessillcock
08-14-2010, 10:23 PM
Hi,

Following on from a previous post, I am after an CSS based 3 Column Layout, in which all columns (left, center, right) are all a fixed width of my choice, and just as important - all 3 columns need to be equal height, so the background colour doesn't just stop when the content inside that column finishes! Can anyone tell me of any sites with tutorials for this?

Regards, James

met
08-14-2010, 11:13 PM
here we go..



<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
padding:0;
margin:0;
}

body {
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
}

p {
margin:20px 0;
}

#wrapper {
margin:auto;
width:980px;
border:1px solid #333333;
margin:15px az;
}

#header {
height:150px;
background:#c4c4c4;
border-bottom:1px solid #333333;
margin:auto;
}

#container {
overflow:auto;
background:url('bg.jpg') repeat-y;
}

#left {
float:left;
width:230px;
padding:10px;
}

#right {
float:right;
width:230px;
padding:10px;
}

#content {
margin:0 265px;
}

#footer {
clear:both;
border-top:1px solid #333333;
background:#c4c4c4;
margin:auto;
padding:15px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"> </div>
<div id="container">
<div id="left">
<h1>Left sidebar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et leo
semper justo consectetur tincidunt nec tristique urna.</p>
<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
mattis non nulla</p>
</div>
<div id="right">
<h1>Right sidebar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et leo
semper justo consectetur tincidunt nec tristique urna.</p>
<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
mattis non nulla</p>
</div>
<div id="content">
<h1>Main Content</h1>
<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
mattis non nulla</p>
<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
mattis non nulla</p>
<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
mattis non nulla</p>
<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
mattis non nulla</p>
<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra
et feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu,
euismod tempor tellus sapien porttitor felis. Phasellus non mi nulla,
at accumsan enim. Phasellus sem justo, egestas nec vestibulum faucibus,
mattis non nulla</p>
</div>
</div>
<div id="footer">
<h3>Footer Content </h3>
<p> Nunc a risus arcu, at malesuada tellus. Mauris est lacus, pharetra et
feugiat at, semper id dolor. Aliquam erat volutpat. Duis a velit orci.
Vivamus lobortis, lorem at vehicula eleifend, ante nisi semper arcu, euismod
tempor tellus sapien porttitor felis. Phasellus non mi nulla, at accumsan
enim. Phasellus sem justo, egestas nec vestibulum faucibus, mattis non
nulla</p>
</div>
</div>
</body>
</html>

jamessillcock
08-15-2010, 08:26 AM
Thakn you for your reply met. This seems good, but have a problem. Although the attachment on your post shows a picture where both the left and right columns are different colours, how is this possible with the code you have given me? I understand the left column's background colour is controlled by the "bg.gif" in the "container" but how is the right column's background colour set? (and still being equal height to the other 2 columns).

Also, with this set up, is it possible to have a different coloured center column and different coloured page background?

met
08-15-2010, 11:11 AM
read up on faux columns (http://www.google.co.uk/#hl=en&source=hp&q=faux+columns&aq=0&aqi=g10&aql=&oq=faux+c&gs_rfai=&fp=b574888f9dc97a30)

jamessillcock
08-15-2010, 11:21 AM
Thanks for your reply. I understand about faux columns - that I have to set a background image so that the columns background colour goes to the goes to the very bottom, but with the code you gave me for the layout, where in the code do I add a background image for the right column. At the moment there is only an image background for the left, and thats in the container code, so it's not obvious where the right would go.

met
08-15-2010, 03:31 PM
its kinda obvious, look at the image bg.jpg - it clearly shows the 3 "faux" columns



#container {
overflow:auto;
background:url('bg.jpg') repeat-y;
}



wraps left, right and content, and acts as the background for all 3.

you would have to adjust this image to suit your needs.

jamessillcock
08-15-2010, 07:52 PM
Ah my apologies met. The first attachment thumbmail looked so small I didn't think of it being of any significence! But that's great - I'll now edit this to suit my needs. Thanks again.

jamessillcock
08-16-2010, 05:36 PM
Everything is going great so far.. I've edited the columns widths/paddings/margins in the CSS code that match my website design and edited the bg image to also match these changes and it's appearing perfect! Fingers crossed I have no problems as I start adding the design and content! Thanks again Met. I just hope this template has been completely checked for errors.. the Holy Grail one I used a few days ago was supposed to be perfect until I found a load of users saying there were compatibility problems. That was with a fliud center tho, I'm thinking a fixed width won't cause many problems...

met
08-16-2010, 07:28 PM
havent checked it in anything other than FF 3.6



That was with a fliud center tho, I'm thinking a fixed width won't cause many problems...


this one has a fluid center too, if you increase the width of #wrapper the "content" section will expand accordingly. you would need to adjust the background image however.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum