Log in

View Full Version : 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


<!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 (http://www.playacochaima.com/newsite/testpage3-with-footer.html) 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.

<!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 (http://www.positioniseverything.net/articles/onetruelayout/equalheight).

Also, remember to validate (http://validator.w3.org/) 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
My current favourite method of achieving this effect is detailed in this PIE article (http://www.positioniseverything.net/articles/onetruelayout/equalheight).

Also, remember to validate (http://validator.w3.org/) 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:


<!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 (http://www.playacochaima.com/newsite/testpage3-with-footer.html)page.

Thanks, Chuck
mburt
01-06-2007, 01:10 AM
That might not be a good idea considering, when you set the overflow to hidden, it overwrites anything it's overlapping. But if it works, by all means go ahead.
z_diver
01-06-2007, 01:48 AM
Oh, hot diggety dog, I thnk we've got it. Been at that for the entire day, and tried a BUNCH of different ideas. I would have thought they would have this down by now without incorporationg a workaround of this type.

I can't complain now though. Working like a charm. Thanks!:)