CSS columns of equal height: Full page

**z_diver** · 01-05-2007, 10:07 PM

I'm having difficulty getting a css page with 3 columns to draw each equal in height. Ideally the page formatting would be just the 3 columns running the length of the entire page with the center column containing most of the content and footer (hence it would be the longest always). Setting 100% doesn't seem to be having the effect I'd like. I've tried setting a wrapper at 100% and also the equalcolumns.js all to no avail.

Is there a trick I can use, such as putting it all in tables or something.

Here is my page: Sorry it's not very clean.
Thanks, Chuck

Code:

<!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>Playa Cochaima, Venezuela: Hotels and Posadas</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta name="description" content="Playa Cochaima Venezuela is for backpackers with posadas, Inns and hotels" />

<meta name="keywords" content="Playa Cochaima Venezuela backpackers hotels clubs kayaking diving snorkeling paragliding stay" />

<link rel="stylesheet" href="newsite.css" type="text/css" />

<link rel="shortcut icon" href="http://www.playacochaima.com/favicon.ico" />
<script src="equalcolumns.js" type="text/javascript"></script>
<style type="text/css">
a:link        { color: blue; text-decoration: none; }

a:visited     { color: purple; text-decoration: none;}

a:hover       { color: #ffffff; text-decoration: none; background-color: green;}

a:active      { color: #ff9f3f; }

a.neon:link        { color: #ccff00; text-decoration: none; display:block; padding-right: 5px; }

a.neon:visited     { color: #ccff00; text-decoration: none; display:block; padding-right: 5px; }

a.neon:hover       { color: #000000; text-decoration: none; background-color: #ccff00; display:block; padding-right: 5px; }

a.neon:active      { color: #ff9f3f; }

body 
{ 
	height: auto;
	background-color: #a2a2a2; }

#columnLeft 
{ 	
	left: 0;
	width: 170px;
	position: absolute;
	top: 0px;
	height: 100%
	background-color: #996600;
	background-image: url(images/PCV-logo2.jpg);
	background-repeat: no-repeat;}

#columnCenter 
{	
	left: 170px;
	top: 0px;
	width: 600px;
	position: absolute;
	height: 100%;
	background-color: #999999;
	background-image: url(images/shadow-left.png);
	background-repeat: repeat-y;
	padding-left: 10px;
	margin-bottom: 0; }

#columnRight 
{ 	
	left: 770px;
	top: 0px;
	background-color: #a2a2a2;
	position: absolute;
	height: 100%;
	background-image: url(images/shadow-right.png);
	background-repeat: repeat-y;
	padding-left: 14px; }

.navbar
{
	position: absolute;
	width: 135px;
	display: block;
	top: 100px;
	padding-left: 35px;
	list-style-type: none;
	font-family: Comic Sans MS, arial, helvetica, sans-serif;
	color: #ccff00;
	font-weight: bold;
	font-size: 16px;
	text-align: right; }

#footer 
{	font-family: Arial, Helvetica, sans-serif; 
	font-size: 10px; 
	text-align: center;
	width: 100%;
	clear: both;
	height: 50px;
	background-color: #FF8080;
	color: #000000; 
	vertical-align: bottom;}

#wrapper
{
	height: 100%; 
	background-image: url(images/bg.png);
	background-repeat: repeat-y; }

</style>


</head>

<body>
<div id="wrapper">
<div id="columnLeft">
<ul class="navbar"><!-- Site navigation menu -->
<li><a class="neon" href="index.shtml">Home</a></li>
<li><a class="neon" href="hotels.shtml">Places to Stay</a></li>
<li><a class="neon" href="restaurants.shtml">Restaurants</a></li>
<li><a class="neon" href="eco-tours.shtml">Things to do</a></li>
<li><a class="neon" href="maps.shtml">How to get here</a></li>
<li><a class="neon" href="contact.shtml">Reservations</a></li>
<li><a class="neon" href="playacochaima.shtml">About Us</a></li>
</ul><!-- End Site navigation menu -->
<img src="images/santa-fe.jpg" vspace="320" alt="Santa Fe image" />
</div>


<!-- Main Page -->
<div id="columnCenter">
<img src="images/spacer.gif" width="600" height="20" alt="spacer" />
<img src="images/check-out-venezuela.png" hspace="20" alt="Check Out Venezuela" /><br /><br />
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill

<div id="footer">&copy; 2004 PlayaCochaima.com | All Rights Reserved<br />
Contact the webmaster if you experience any difficulties with this site.
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" border="0" align="top" /></a>
</div><!-- End of footer -->

</div><!-- End Main Page -->

<div id="columnRight"><!-- Right Side column -->
<img src="images/beach-boat-kayak.jpg" vspace="65" alt="Boats on isla Arapo" />
</div><!-- End Right Side column -->

</div><!-- End wrapper -->

</body>
</html>

**z_diver** · 01-05-2007, 11:41 PM

Here is a link to the page in question in case that helps.

Thanks, Chuck

**mburt** · 01-05-2007, 11:47 PM

Instead of position:absolute, use float:left, it will keep each segment in line.

Code:

<!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>Playa Cochaima, 
Venezuela: Hotels and Posadas</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta name="description" content="Playa Cochaima Venezuela is for backpackers with posadas, Inns and hotels" />

<meta name="keywords" content="Playa Cochaima Venezuela backpackers hotels clubs kayaking diving snorkeling paragliding stay" />

<link rel="stylesheet" href="newsite.css" type="text/css" />

<link rel="shortcut icon" href="http://www.playacochaima.com/favicon.ico" />
<script src="equalcolumns.js" type="text/javascript"></script>
<style type="text/css">
a:link        { color: blue; text-decoration: none; }

a:visited     { color: purple; text-decoration: none;}

a:hover       { color: #ffffff; text-decoration: none; background-color: green;}

a:active      { color: #ff9f3f; }

a.neon:link        { color: #ccff00; text-decoration: none; display:block; padding-right: 5px; }

a.neon:visited     { color: #ccff00; text-decoration: none; display:block; padding-right: 5px; }

a.neon:hover       { color: #000000; text-decoration: none; background-color: #ccff00; display:block; padding-right: 5px; }

a.neon:active      { color: #ff9f3f; }

body 
{ 
	height: auto;
	background-color: #a2a2a2;
	margin: 0px;
	padding: 0px
 }

#columnLeft 
{ 	
	float: left;
	width: 170px;
	height: 100%
	background-color: #996600;
	background-image: url(images/PCV-logo2.jpg);
	background-repeat: no-repeat;}

#columnCenter 
{	
	float: left;
	width: 600px;
	height: 100%;
	background-color: #999999;
	background-image: url(images/shadow-left.png);
	background-repeat: repeat-y;
	padding-left: 10px;
	margin-bottom: 0; }

#columnRight 
{ 	
	background-color: #a2a2a2;
	float:left
	height: 100%;
	background-image: url(images/shadow-right.png);
	background-repeat: repeat-y;
	padding-left: 14px; }

.navbar
{
	width: 135px;
	display: block;
	top: 100px;
	padding-left: 35px;
	list-style-type: none;
	font-family: Comic Sans MS, arial, helvetica, sans-serif;
	color: #ccff00;
	font-weight: bold;
	font-size: 16px;
	text-align: right; }

#footer 
{	font-family: Arial, Helvetica, sans-serif; 
	font-size: 10px; 
	text-align: center;
	width: 100%;
	clear: both;
	height: 50px;
	background-color: #FF8080;
	color: #000000; 
	vertical-align: bottom;}

#wrapper
{
	height: 100%; 
	background-image: url(images/bg.png);
	background-repeat: repeat-y; }

</style>


</head>

<body>
<div id="wrapper">
<div id="columnLeft">
<ul class="navbar"><!-- Site navigation menu -->
<li><a class="neon" href="index.shtml">Home</a></li>
<li><a class="neon" href="hotels.shtml">Places to Stay</a></li>
<li><a class="neon" href="restaurants.shtml">Restaurants</a></li>
<li><a class="neon" href="eco-tours.shtml">Things to do</a></li>
<li><a class="neon" href="maps.shtml">How to get here</a></li>
<li><a class="neon" href="contact.shtml">Reservations</a></li>
<li><a class="neon" href="playacochaima.shtml">About Us</a></li>
</ul><!-- End Site navigation menu -->
<img src="images/santa-fe.jpg" vspace="320" alt="Santa Fe image" />
</div>


<!-- Main Page -->
<div id="columnCenter">
<img src="images/spacer.gif" width="600" height="20" alt="spacer" />
<img src="images/check-out-venezuela.png" hspace="20" alt="Check Out Venezuela" /><br /><br />
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill

<div id="footer">&#169; 2004 PlayaCochaima.com | All Rights Reserved<br />
	Contact the webmaster if you experience any difficulties with this site.
<a href="http://validator.w3.org/check?uri=referer">
	<img src="valid-xhtml10.png" alt="Valid XHTML 1.0 Transitional" border="0" align="top" /></a>
</div><!-- End of footer -->

</div><!-- End Main Page -->

<div id="columnRight"><!-- Right Side column -->
<img src="images/beach-boat-kayak.jpg" vspace="65" alt="Boats on isla Arapo" />
</div><!-- End Right Side column -->

</div><!-- End wrapper -->

</body>
</html>

**Twey** · 01-05-2007, 11:55 PM

My current favourite method of achieving this effect is detailed in this PIE article.

Also, remember to validate your HTML (and do use HTML 4.01 Strict, not XHTML and definitely not a Transitional DOCTYPE). There's no guarantee that CSS will work as it should without a valid parse tree.

**z_diver** · 01-06-2007, 12:01 AM

This is a reply to previous post...

OK, thanks. I've changed the absolute to float:left and it seems to work fine. That helps clean up some of the messy code but do you have any idea what would fix the columns issue?

Note: I've heard people speak of using padded columns for this purpose but not sure how to try that. It's not actually critical that all 3 are equal but it would be nice if they appear to be full screen. For some reason by background image is not displaying in the wrapper and if it did, it might turn out to be an acceptable workaround.

Chuck

**z_diver** · 01-06-2007, 12:07 AM

Originally Posted by Twey

My current favourite method of achieving this effect is detailed in this PIE article.

Also, remember to validate your HTML (and do use HTML 4.01 Strict, not XHTML and definitely not a Transitional DOCTYPE). There's no guarantee that CSS will work as it should without a valid parse tree.

Thanks Twey,
I saw this earlier but stopped when I saw all the hacks that are necessary for different browsers. How important would all of these be? Also, will it be OK to go this route if I don't want to use a full width footer?

Chuck

**Twey** · 01-06-2007, 12:16 AM

The hacks are only required if you use anchors within the document (<a name="#identifier">). If you don't, you needn't worry about them. If you do, however, it's definitely a good idea to include the hacks, since otherwise some of your content may be hidden.

Also, will it be OK to go this route if I don't want to use a full width footer?

Yes. Simply give the footer a background through which the columns don't show, then apply the same principle to it to make that background extend down to the bottom of the page (presuming the footer isn't positioned precisely at the bottom of the page).

**mburt** · 01-06-2007, 01:00 AM

One more thing: Personally, I can't stand it when people use position:absolute as a way to position things for layouts. It differs between browsers, and it's less solid looking. Stay away from that unless you're doing a floating menu or something.

**z_diver** · 01-06-2007, 01:02 AM

OK, I tried the technique expressed on PIE but it doesn't look to have given much success. Doctype is now html 4.0 strict save for two hspace tags on images and then added and subtracted the padding to all 3 columns in addition giving the wrapper overflow:hidden. Does that sound correct?

New code is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Playa Cochaima, Venezuela: Hotels and Posadas</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="description" content="Playa Cochaima Venezuela is for backpackers with posadas, Inns and hotels">

<meta name="keywords" content="Playa Cochaima Venezuela backpackers hotels clubs kayaking diving snorkeling paragliding stay">

<link rel="stylesheet" href="newsite.css" type="text/css">

<link rel="shortcut icon" href="http://www.playacochaima.com/favicon.ico">
<script src="equalcolumns.js" type="text/javascript"></script>
<style type="text/css">
a:link        { color: blue; text-decoration: none; }

a:visited     { color: purple; text-decoration: none;}

a:hover       { color: #ffffff; text-decoration: none; background-color: green;}

a:active      { color: #ff9f3f; }

a.neon:link        { color: #ccff00; text-decoration: none; display:block; padding-right: 5px; }

a.neon:visited     { color: #ccff00; text-decoration: none; display:block; padding-right: 5px; }

a.neon:hover       { color: #000000; text-decoration: none; background-color: #ccff00; display:block; padding-right: 5px; }

a.neon:active      { color: #ff9f3f; }

body 
{ 
	background: #a2a2a2 url(../images/bg.png) repeat-y 0 0;
	height: auto; }

#columnLeft 
{ 	
	float: left;
	width: 170px;
	height: 100%;
	padding-bottom: 5000px;
	margin-bottom: -5000px;
	background-color: #996600;
	background-image: url(images/PCV-logo2.jpg);
	background-repeat: no-repeat;}

#columnCenter 
{	
	float: left;
	width: 600px;
	height: 100%;
	padding-bottom: 5000px;
	margin-bottom: -5000px;
	background-color: #999999;
	background-image: url(images/shadow-left.png);
	background-repeat: repeat-y;
	padding-left: 10px; }

#columnRight 
{ 	
	float: left;
	background-color: #a2a2a2;
	height: 100%;
	padding-bottom: 5000px;
	margin-bottom: -5000px;
	background-image: url(images/shadow-right.png);
	background-repeat: repeat-y;
	padding-left: 14px; }

.navbar
{
	position: absolute;
	width: 135px;
	display: block;
	top: 100px;
	padding-left: 35px;
	list-style-type: none;
	font-family: Comic Sans MS, arial, helvetica, sans-serif;
	color: #ccff00;
	font-weight: bold;
	font-size: 16px;
	text-align: right; }

#footer 
{	font-family: Arial, Helvetica, sans-serif; 
	font-size: 10px; 
	text-align: center;
	width: 100%;
	clear: both;
	height: 50px;
	background-color: #FF8080;
	color: #000000; 
	vertical-align: bottom;}

#wrapper
{
	height: 100%; 
	overflow: hidden;
	background-image: url(images/bg.png);
	background-repeat: repeat-y; }
</style>


</head>

<body>
<div id="wrapper">
<div id="columnLeft">
<ul class="navbar"><!-- Site navigation menu -->
<li><a class="neon" href="index.shtml">Home</a></li>
<li><a class="neon" href="hotels.shtml">Places to Stay</a></li>
<li><a class="neon" href="restaurants.shtml">Restaurants</a></li>
<li><a class="neon" href="eco-tours.shtml">Things to do</a></li>
<li><a class="neon" href="maps.shtml">How to get here</a></li>
<li><a class="neon" href="contact.shtml">Reservations</a></li>
<li><a class="neon" href="playacochaima.shtml">About Us</a></li>
</ul><!-- End Site navigation menu -->
<img src="images/santa-fe.jpg" vspace="320" alt="Santa Fe image" />
</div>


<!-- Main Page -->
<div id="columnCenter">
<img src="images/spacer.gif" width="600" height="20" alt="spacer" />
<img src="images/check-out-venezuela.png" hspace="20" alt="Check Out Venezuela" /><br /><br />
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill
<br />fill

<div id="footer">&copy; 2004 PlayaCochaima.com | All Rights Reserved<br />
Contact the webmaster if you experience any difficulties with this site.
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" /></a>
</div><!-- End of footer -->

</div><!-- End Main Page -->

<div id="columnRight"><!-- Right Side column -->
<img src="images/beach-boat-kayak.jpg" vspace="65" alt="Boats on isla Arapo" />
</div><!-- End Right Side column -->

</div><!-- End wrapper -->

</body>
</html>

**z_diver** · 01-06-2007, 01:10 AM

Wait, it did work, sort of. When I pulled out the link to the stylesheet I got it to be full screen. I now have what looks like a 2000 px long page but with 3 columns all the way to the bottom. Great! One caveat is there is now approx 5px space on the left and top of the page

Much closer though.

This is in reference to this page.

Thanks, Chuck

Thread: CSS columns of equal height: Full page

Thread Tools

Search Thread

CSS columns of equal height: Full page

Bookmarks

Bookmarks

Posting Permissions