4 replies [Last post]
ziffa27
ziffa27's picture
Offline
Regular
Malta
Last seen: 7 years 10 weeks ago
Malta
Timezone: GMT+2
Joined: 2008-09-10
Posts: 20
Points: 2

Hi all,
I would like to create a 3 column layout with the left menu, right menu & the content to have the same height always independently which is the longest like this example below.
Also I have attached the HTML & CSS for your reference.
How can I do this in CSS please?
Thanks in advance

ziffa27

Example: http://www.pixy.cz/blogg/clanky/css-3col-layout/

<!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">
<!--
html, body {
	margin: 0;
	padding: 0;
}
 
body {
	background: silver;
	color: #000000;
	font-family: 'Arial, Helvetica, sans-serif';
	font-size:11px;
	font-weight:normal;
	line-height:16px;
	text-align:left;
}
 
#container {
	background: yellow;
	margin: auto;
	padding: 0;
	width: 1000px;
}
 
#header {
	background: orange;
	margin: 0;
	padding: 0;
	height: 200px;
}
 
#left_menu {
	background: red;
	margin: 0;
	padding: 0;
	width: 200px;
	float: left;
}
 
#right_menu {
	background: blue;
	margin: 0;
	padding: 0;
	width: 300px;
	float: right;
}
 
#content {
	background: green;
	margin: 0;
	padding: 0;
	margin-left: 200px;
	width: 500px;
}
 
#footer {
	background: aqua;
	margin: 0;
	padding: 0;
	clear: both;
	height: 30px;
}
-->
</style>
</head>
</head>
<body>
	<div id="container">
	  <div id="header">Header</div>
        <div id="left_menu">Left menu</div>
        <div id="right_menu">Right menu</div>
        <div id="content">Content<br />Lorem ipsum dolor sit amet, est vitae ut. Risus amet illo mollitia magna erat voluptatem, adipiscing arcu eget cras eu nulla, quam eu nec orci, magna quisque nullam adipiscing integer suspendisse, vulputate hac id vivamus at sed mi. Pede magnis fringilla etiam, tempus vel vitae elementum sed nunc omnis. Praesent condimentum aliquam in eros et, pharetra nam imperdiet corrupti posuere, per suspendisse diam turpis parturient turpis, suscipit semper augue nulla, curabitur ac nisl. Iaculis tempor quam id morbi, sodales nullam nulla, ullamcorper tortor illum hendrerit, wisi fringilla ornare fames in, at ornare luctus eu officia platea.</div>
        <div id="footer">Footer</div>
    </div>
</body>
</html>

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 2 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

If you google "faux columns"

You'll basically need the "faux columns" trick for this.

For your example, with a red 200px left column, a green 500px middle column, and a blue 300px right column..

What you would do is, in a program like photoshop, you would create an image file that would look like your 3 columns would if next to eachother.

Basically, make an image file 1000px wide (any height for now.. I usually do 50px or something just to help me see what I'm doing). Once you have your image, color the first 200px red, the next 500px green, and the last 300px blue. At this point, I crop the image down to 1px in height just to lower the file size.

Save that image so you can use it later as a background image.

Then, on your page, set the background of your "container" div to be that image file you just made.

Then put whatever content you wish inside of the 3 nested divs (don't set a background to these). No matter how long any of the divs get, you will still see what appears to be 3 columns of the exact length because the container div's background is repeating in height to match the longest of the contained divs.

That's basically the "faux trick" in a nutshell. Hopefully that made sense.. if not, there are a bunch of websites that explain it. Good luck!

EDIT:
The coding for this would look something like..

#container {
background-image: url('bgimage.jpg');
margin: auto;
padding: 0;
width: 1000px;
}

<div id="container">
<div id="header">Header</div>
<div id="left_menu">Left menu</div>
<div id="right_menu">Right menu</div>
<div id="content">Content Goes Here</div>
<div id="footer">Footer</div>
</div>

EDIT #2:
This assumes that you have a different background for the header and footer.. something that would not allow the column background to show through. If you don't, you would have to leave your container div alone, and create a 2nd container div to hold just your left menu, content, and right menu divs.

Something like:

<div id="container"> <!-- No Background Image -->
<div id="header">Header</div>
 
<div id="container_2"> <!-- Background Image Set Here -->
<div id="left_menu">Left menu</div>
<div id="right_menu">Right menu</div>
<div id="content">Content Goes Here</div>
</div>
 
<div id="footer">Footer</div>
</div>

Matthew Herren
Matthew Herren's picture
Offline
Regular
Louisville, KY.
Last seen: 12 years 31 weeks ago
Louisville, KY.
Timezone: GMT-3.5
Joined: 2009-02-24
Posts: 27
Points: 0

Works Great

I have used that faux colums on my latest site and it works great. I had to play around with the px to get the size right, but it works. If you get to frustrated, remember this is CSSCREATOR, and they have a generator that works as a reference sheet too.

Sic vis pacum para bellum.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

cross-post

This is a cross-post with three other forums. That is poor netiquette, and is frowned on in this forum. I will leave the thread open, only because you have already received responses here.

Other members should be aware that the Sitepoint thread has also received help.

cheers,

gary
in moderator mode

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ziffa27
ziffa27's picture
Offline
Regular
Malta
Last seen: 7 years 10 weeks ago
Malta
Timezone: GMT+2
Joined: 2008-09-10
Posts: 20
Points: 2

Thanks Titan793 good idea

Thanks Titan793 good idea