Making a 3 column layout using CSS

**poslanik** · Mar 15, 2006, 10:05

Hi,

I need some help. I would like to code a website layout with 3 colums using CSS. I've seen some premade templates and I had tried using them as reference while making my own layout but to no avail as usual.

Thing is, nothing is working as it should in either Firefox and IE. I've provided links to my html document and css sylesheet. As you can see there's just a few lines of code but even that isn't working.

Also, if you know any links to articles or tutorials for making such layouts please post them.

Html document - http://rv-camp.net/various/index.htm

Css stylesheet - http://rv-camp.net/various/style.css

Thanks in advance

**Ize** · Mar 15, 2006, 10:10

Check out this one: http://www.alistapart.com/articles/holygrail/

**all4nerds** · Mar 15, 2006, 10:32

Hello

no DTD

3 pixel jog in IE #cblok{float:left;

floats are not cleared for FF NS Moz Op
head+body #wrap:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>Ime tvrtke - naslov stranice</title>
<meta name="description" content="Opis tvrtke u kratko" />
<meta name="keywords" content="kljuène, rijeèi, vezane, uz, tvrtku" />
<meta name="author" content="Tomislav - nomad2389@gmail.com" />
<style type="text/css">
	<!--
	body{font-family:verdana,sans-serif;font-size: 10pt;}
	*{margin:0;padding:0;}
	#wrap{width:650px;background:yellow;margin:0 auto;padding:2px 2px 2px 2px;}
	#lblok{width:150px;float:left;margin-right:5px;/*vertical-align:top;*/background:lime;display:inline;}
	#dblok{width:150px;float:right;margin-left:5px;/* vertical-align:top; */background:lime;display:inline;}
	#cblok{width:340px;float:left;background:lime;/* vertical-align:top; */}
	head+body #wrap:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}
	-->
	</style>
</head>
<body>

<div id="wrap">

<div id="lblok">
Placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder
</div>

<div id="cblok">
Placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder,
</div>

<div id="dblok">
Placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder
</div>
</div>

</body>
</html>

**poslanik** · Mar 15, 2006, 10:45

Thanks mate, the site's now fully functonal in FF, but it's still buggered with IE. Can you help me with that too?

**all4nerds** · Mar 15, 2006, 10:47

Originally Posted by poslanik

Thanks mate, the site's now fully functonal in FF, but it's still buggered with IE. Can you help me with that too?

? my code runs in IE6 FF NS Moz OP ?

**poslanik** · Mar 15, 2006, 11:10

Yes, you're right. I forgot to paste

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

to my index file.

Why does this matter?

And another question if you don't mind.

Code:

head+body #wrap:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}

What does this piece of code actually do? And what does DTD mean. What about 3px jog in IE, what did you mean by that?

**all4nerds** · Mar 15, 2006, 11:11

Hello

DTD to get IE6 in the same box model as FF NS Moz OP see FAQ CSS
http://www.sitepoint.com/forums/show...61&postcount=1

clear the floats , see FAQ CSS

http://www.sitepoint.com/forums/show...5&postcount=15

the PIE way
http://www.positioniseverything.net/easyclearing.html

head+body #wrap:after{
content: ".";
display: block;
height:0;
clear: both;
visibility: hidden;
}

**poslanik** · Mar 15, 2006, 11:15

Sorry but I don't understand the terminlogy

What+s DTD, what does it mean to clear the floats, and what's PIE?

**all4nerds** · Mar 15, 2006, 11:22

Hello

DTD, Doctype declaration
http://www.w3.org/QA/2002/04/valid-dtd-list.html

if you float containers you have to end the float, clear them, try to read the FAQ tread on it

PIE
Position Is Everything a website on problem solving with browsers
http://www.positioniseverything.net/

**poslanik** · Mar 15, 2006, 11:25

Ok thanks for all your help. Cheers!

**poslanik** · Mar 15, 2006, 11:32

One more thing. I have downloaded a template from oswd.org to find out how these floats, divs and all that works. If you have time and will, please go through the code because this template doesn't clear the floats and works well with both IE and FF. It uses a wrap, 2 columns inside the wrap, and then multiple small content boxes within both left and right columns.

Link: http://rv-camp.net/various/temp/

**all4nerds** · Mar 15, 2006, 11:38

Hello

You maybe better start of with Paul's sticky tread on 3 column design, so that you can build your own designs
http://www.sitepoint.com/forums/showthread.php?t=143801

had a quick look at the template this clears the floats
#footer {clear:both; text-align:center;}

PS you can't learn CSS HTML+Positioning in 5 minutes

**poslanik** · Apr 14, 2006, 11:26

Hi again.

I know you provided me with many links but I don't want to scrap my design. The problem I now have (should be the last) is that I need those 3 columns to expand when 1 of the other 2 is higher than the one in question. So when I put a lot of text in the center block I'd like for 2 side columns to expand together with it.

Please help me... again :S

**all4nerds** · Apr 14, 2006, 11:42

Hello

your code so far please

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>Ime tvrtke - naslov stranice</title>
<meta name="description" content="Opis tvrtke u kratko" />
<meta name="keywords" content="kljuène, rijeèi, vezane, uz, tvrtku" />
<meta name="author" content="Tomislav - nomad2389@gmail.com" />
<style type="text/css">
	<!--
	html,body{height:100%;}
	
	*{margin:0;padding:0;}
	
	body{font-family:verdana,sans-serif;font-size: 10pt;}
	
	
	.wrap{width:650px;background:yellow;margin:0 auto;}
	* html .wrap{height:100%;}
	head+body .wrap{min-height:100%;overflow:hidden;}
	
	.lblok{width:150px;float:left;margin:2px 5px 2px 2px;/*vertical-align:top;*/background:lime;display:inline;}
	.dblok{width:150px;float:right;margin:2px 2px 2px 5px;/* vertical-align:top; */background:lime;display:inline;}
	.cblok{width:336px;float:left;background:lime;margin:2px 0 0 0;/* vertical-align:top; */display:inline;}
	
	
	.wrap p{padding:5px;}
	
	head+body .wrap:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}
	.ex{padding-bottom:32767px;margin-bottom:-32767px;}
	-->
	</style>
</head>
<body>

<div class="wrap">

<div class="lblok ex">
<p>
Placeholder
<!-- 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> -->
placeholder<br>
</p>
</div>

<div class="cblok ex">
<p>
Placeholder
<!-- 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> -->
placeholder<br>
</p>
</div>

<div class="dblok ex">
<p>
Placeholder
<!-- 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> -->
placeholder<br>
</p>
</div>
</div>

</body>
</html>

**poslanik** · Apr 15, 2006, 02:28

Hi, thanks for the fast reply.

Here's my current code -> http://rv-camp.net/test

Stylesheet is style.css, so if you would be kind enough to apply these changed to my current file I would be very happy.

P.S. Why isn't putting a simple height:100%; attribute to all of my blocks enough?

**all4nerds** · Apr 15, 2006, 07:45

Hello

PS ID you can only use one time per page, use Class if you need the css on several elements

eXtended column's

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>LearnCroatian.com - free phrases, expressions and basic knowledge in the Croatian language</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1250" />
<meta name="description" content="LearnCroatian.com is the site for grasping the basics of the Croatian language " />
<meta name="keywords" content="croatia, language, hrvatski, hrvatska, croatian" />
<meta name="author" content="Tomislav - nomad2389@gmail.com" />
	<style type="text/css">
	<!-- 
	body{background:#1CA9DE url(oblaci.jpg) top left no-repeat;font-family:verdana,sans-serif; font-size: 10pt; padding:5px;}
	*{margin:0;padding:0;}
	#wrap{width:700px;background:#058FBC;margin:0 auto;border:3px solid #058fbc;}
	
	#banner {background:#8FD2F8 url(slika.jpg);margin-bottom:5px; height:125px;border:5px solid #8FD2F8;}
	
	#lblok,#dblok{width:150px;background:#8FD2F8;display:inline;}
	#lblok{float:left;margin-right:5px;}
	#dblok{float:right;margin-left:5px;}
	
	#cblok{width:390px;float:left;background:#8FD2F8;}
	
	.naslov,#naslovsredina {border-left:1px solid #058FBC;border-bottom:1px solid #058FBC;padding:2px;margin:10px 10px 5px 5px;color:white;font-variant:small-caps; font-weight:bold;letter-spacing:1px;}

	#naslovsredina{border-left:none;}
	
	.tekst {margin:10px; }
	
	#naslovslika {margin-left:5px; margin-top:5px; margin-right:425px; font-size:25px; color:white; font-variant:small-caps; font-weight:bold; letter-spacing:3px; border-bottom: 2px solid #058FBC; border-right: 2px solid #058FBC;}

	td {text-align: center;}
	table {border-collapse:collapse; border-color:#058FBC;}
	a {color:black; border-bottom:1px dotted #058FBC; text-decoration:none;}
	a:hover {color:black; border-bottom:0px; text-decoration:none;}
	table.sredina td {width:50%;}
	.crveno {color:#E71212;}
	head+body #wrap:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;}
	
	head+body #wrap{overflow:hidden;}
	
	head+body .ex:after{
	content: ".";
	display:block;
	background:inherit;
	height:0;
	margin-bottom:-32767px;
	padding-top:32767px;
	}
	-->
	</style>
<!--[if IE]>
<style type="text/css">
* html .ex{padding-bottom:32767px;margin-bottom:-32767px;}
</style>
<![endif]-->
</head>
<body>

<div id="wrap">

<div id="banner">

<div id="naslovslika">
<span class="crveno">L</span>e<span class="crveno">a</span>r<span class="crveno">n</span> C<span class="crveno">r</span>o<span class="crveno">a</span>t<span class="crveno">i</span>a<span class="crveno">n</span>
</div>

</div>

<div id="lblok" class="ex">

<div class="naslov">CATEGORIES</div>
<div class="tekst">
&#187; <a href="index-2.html">Homepage</a>   <br />
&#187; <a href="abeceda.html">The alphabet</a>   <br />
&#187; <a href="izrazi.html">Phrasebook</a>          <br />
&#187; <a href="dani.html">Days, months &amp; seasons</a>    <br />
&#187; <a href="brojevi.html">Numbers</a>                         <br />
</div>
<div class="naslov">reklame</div>
<div class="tekst">placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder  </div>
<div class="naslov">dodaci</div>
<div class="tekst">placeholder, placeholder, placeholder, placeholder, placeholder, placeholder,</div>

</div>

<div id="cblok" class="ex">

<div id="naslovsredina">Welcome - dobrodošli</div>
<div class="tekst">
Welcome to LearnCroatian.com, site designed for free grasping of the Croatian language. Whether you're coming here for holidays or
business, you'll find enough information on this site to communicate with the locals and get what you want - providing you don't get into deep conversasions 
:)
</div>

</div>

<div id="dblok" class="ex">

<div class="naslov">cjenik</div>
<div class="tekst">Placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder</div>
<div class="naslov">klijenti</div>
<div class="tekst">placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder</div>
</div>

</div>

</body>
</html>

**poslanik** · Apr 15, 2006, 10:53

Thanks again, wraps better than your first code because on that one the wrap div and colum divs were the same hight so at the bottom the blocks overlapped the wrapper as if it didn't have padding.

Seems to work in FF and IE but not completely in Opera. Are all those :afters, exs, html+bodies hacks? Seems to me all designs need to be hacked to death in order work

P.S. Any special reason why the ex has 32767 set as margin and padding? Or can it be any large number?

**all4nerds** · Apr 15, 2006, 11:27

Hello

works in IE6 FF1.07 1.5 NS 6 7.2 Moz 1.7 OP 7 8 8.5 9

you asked for column eXpand? = ex 32767 margin and padding
play with background colors, or background images to make colums

div's do not expand or follow other div's heights

* html only code for IE < 7
head+body code for FF NS Mz OP and IE > 6

bare 3 column demo no hacks, center column, must always be higher then, L R column
but can be set with a height IE min-height FF,etc

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Basic 3 Column Bare </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	*{margin:0;padding:0;}
	
	body{font-size:75%;background:#a2a2a2;}
	
	div,div *{font-size:1em;}
	
	.wra{
	width:64em;
	margin:1em auto;
	background:#b7b7b7;
	}
	
	.he{background:#ff8c00;}
	
	.na{background:#fbfbfb;}
	
	.l,.ll{float:left;width:14em;}
	
	.r{float:left;width:36em;background:#d8d8d8;}
	
	.fo{width:100%;background:#fbfbfb;clear:both;}
	
	.wra div *,.fo p{padding:5px;}
	
	</style>
</head>
<body>

<div class="wra">

<div class="he">
<h1>header</h1>
<p>Basic 3 Column Bare <br /><br /><br /></p>
</div>

<div class="na"><p>nav</p></div>

<div class="l"><p>left<br /><br /><br /><br /><br /><br /><br /><br /><br />end</p></div>

<div class="r">
<p>Content in this box must always be heigher then that of the left or right colunm</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
</div>

<div class="ll"><p>left<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />end</p></div>
<div class="fo"><p>footer</p></div>
</div>

</body>
</html>

min height , borders, 3 color column's,

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345 </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	html,body{/*html for FF Moz NS7 OP */
	text-align:center; /*IE 5 IE 5.5*/
	margin:0;/* no margins body */
	padding:0;/* no padding body */
	}
	
	*{margin:0;padding:0;}
	
	body{font-size:75%;background:#eaeaea;}
	
	div,p{
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size:1em;
	color:#000000;
	margin:0em;
	padding:0em;
	text-align:left;/* to get text back to the left*/
	}
	
	.wra{
	width:64em;
	margin:1em auto;
	border:1px solid #000000;
	background:#e3dcc9;
	}
	
	.he{background:#ff6600;}
	
	.na{
	border-top:1px solid #000000;
	border-bottom:.1em solid #000000;
	width:100%;
	list-style:none;
	}
	.na li{float:left;}
	
	.na a{display:block;text-decoration:none;color:#000000;border-right:.1em solid #000000;background:#ffff99;width:14.9em;}
	
		
	.na .y a{border-right:none;}
	
	.na a:hover,.lna a:hover{background:#ccff66;}
	
	.lna{list-style:none;width:15.9em;float:left;border-right:.1em solid #000000;}

	
	.lna li{float:left;}
	
	.lna a{
	border-bottom:.1em solid #000000;
	text-decoration:none;
	color:#000000;
	display:block;
	width:14.9em;
	}

	.r{
	width:16em;
	float:right;
	border-left:.1em solid #000000;
	}

	
	.con{
	width:31.9em;
	float:left;
	border-left:.1em solid #000000;
	border-right:.1em solid #000000;
	position:relative;
	margin:0 -.1em 0 -.1em;
	background:#ffffff;
	}
	
	head+body .r,head+body .r,head+body .con{min-height:30em;}
	* html .r,* html .l,* html .con{height:30em;}
	
	.fo{
	background:#ff6600;
	clear:both;
	border-top:.1em solid #000000;
	width:100%;
	}
	
	.wra p,.na a,.lna a{padding:.5em;}
	
	.x p{font-size:.9em;}
	
	head+body .na:after,head+body .lna:after,head+body .bc:after{
	content: "."; 
	display: block; 
	height:0; 
	clear: both; 
	visibility: hidden;
	}
	
	.bc{background:#cccc99;}
	head+body .bc{margin-left:16em;}
	* html .bc{height:1%;float:left;}
	</style>
	<!--[if IE]>
	<style type="text/css">
	* html .wra{width:64.2em;w\idth:64em;}
	* html .na a{width:16em;w\idth:14.9em;}
	* html .lna{width:16em;w\idth:14.9em;}
	* html .lna a{width:15.9em;w\idth:14.9em;}
	* html .r{width:16.1em;w\idth:16em;}
	* html .con{width:32.1em;w\idth:31.9em;}
	</style>
	<![endif]-->
</head>

<body>
<div class="wra">

<div class="he"><p>header<br /><br /><br /><br /><br /></p></div>
<ul class="na"><li><a href="##">nav</a></li><li><a href="##">nav</a></li><li><a href="##">nav</a></li><li class="y"><a href="##">nav</a></li></ul>


<ul class="lna"><li><a href="##">nav</a></li><li><a href="##">nav</a></li><li><a href="##">nav</a></li><li><a href="##">nav</a></li></ul>
<div class="bc">
<div class="r"><p>right<br />end<br /><br /><br /></p></div>
<div class="con"><p>
content<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> -->
end
</p>
</div>
</div>

<div class="fo"><p>footer</p></div>
<div class="fo x"><p>footer</p></div>

</div>

</body>
</html>

**poslanik** · Apr 16, 2006, 02:54

I'm afraid it doesn't really work with opera. You see, when I put a lot of content in the centre block and when it starts to expand, at some points the side columns will stop following. Try it if you don't believe me. But I don't care, I like it the way it is.

I think I'll just give up on CSS and use templates... Cuz I'll never figure out how things work what needs hacking and all that annoying stuff.

**all4nerds** · Apr 16, 2006, 03:12

Hello

use:
margin-bottom:-1000em;
padding-top:1000em;

The SitePoint Forums have moved.

User Tag List

Thread: Making a 3 column layout using CSS

Thread Tools

Display

Making a 3 column layout using CSS

Bookmarks

Bookmarks

Posting Permissions