Jeeves
I write the interwebz
-
-
Members
-
-
4,156 posts
-
Friendly neighborhood standards Nazi
Posted 31 March 2009 - 02:45 AM
Now, people are always telling me "noo, CSS layouts are too hard!" Some even claim "I would use them but tables are easier!"
Such arguments hold as much weight as a half-eaten marshmallow tied to 47 helium balloons - you can see from the colorful balloons that somethings there, but its not what you'd call grounded. So to show just how easy CSS layouts can be, heres the easiest method I know for creating the most sought-after layout by the pro-table slackers - three equalizing columns.
I'll be assuming a fundemental understanding of CSS, so if you don't know how to implement
color: red; to make something red, theres lots of good tutorials out there to get you started (HTMLDog, W3Schools, etc.).
To begin, lets draw up the HTML. This layout requires standards mode, so just make sure you use a valid doctype to trigger it.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR...l1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB" xml:lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css; charset=UTF-8" />
<title>Example Fluid Equalising Three-column Layout</title>
</head>
<body>
<div id="branding">
<h1>Example Fluid Equalising Three-column Layout</h1>
</div>
<div id="contentWrapper">
<div id="columnLeft" class="column">
<h3>Left 20%</h3>
</div>
<div id="columnCenter" class="column">
<h3>Center 60%</h3>
</div>
<div id="columnRight" class="column">
<h3>Right 20%</h3>
</div>
</div>
<div id="copyright">
<p>Copyright - 100%</p>
</div>
</body>
</html>
Now, as you can see I've needed to use a wrapper, which I hate, but is essential for the layout. The magic to the following technique is to make the columns far longer then they need to be, then pull the footer back up and hide the difference. And it sounds more complex than it is, so lets begin our CSS by setting the widths of the columns and floating them;
CODE
#branding { background: #ddd; }
#columnLeft { float: left; width: 20%; background: #fdd; }
#columnCenter { float: left; width: 60%; background: #dfd; }
#columnRight { float: right; width: 20%; background: #ddf; }
#copyright { clear: both; background: #ddd; } At this stage, you already have a working three-column layout with header and footer. See? Not hard at all. However, you'll notice if you change the content, that the columns heights are independent. So now for the magic bit - making the columns equalize.
You should have already noticed the column class, and the aforementioned wrapper. So now we use a large padding and equal negative margin on the bottom of the columns, and hide the overflow with the wrapper. This makes them bigger than they need to be, without displaying the full height.
CODE
.column { padding-bottom: 9999em; margin-bottom: -9999em; }
#contentWrapper { overflow: hidden; background: #dfd; } End result? try it yourself, three equal height fluid columns, surrounded by branding and copyright sections. But wait, theres more;
A limitation of float widths being set to percentages is you can't add padding inside the columns themselves without it breaking, so you might want to add a container content div inside each and reset default padding.
Also, if you need to support IE7 or 6, you'll need some additional styles to fix its broken box-model implimentation and 3px jog;
CODE
<!--[if lte IE 7]>
<style type="text/css">
body { word-wrap: break-word; }
#columnCenter { width: 59.8%; }
* html #contentWrapper { display: inline-block; }
</style>
<![endif]--> 
