Problem
Creating of columns of equal length. In the past we have heard of Faux Columns as per List Apart found here http://www.alistapart.com/articles/fauxcolumns/, but this is very restricting in that a background image use used to create the illusion of equal length columns.
Solution
The solution can be found in the CSS display property with a value of table and table-cell, see here http://www.w3schools.com/css/pr_class_display.asp. The problem is that IE7 and older, do not support the table/table-cell values. At the end of 2010, these browsers constituted 10.5% of all browsers used. Should we therefore ignore the display property with the associated values? We can always add style rules to at least give an acceptable outcome to these browsers.
Detailed explanation
First create our main document with the following structure
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Equal length Columns</title>
</head>
<body>
<div id="header">
<h1>Heading</h1>
</div>
<div id="nav">
<p>Navigation Bar</p>
</div>
<div id="content">
<div id="article">
<h2>The main content</h2>
</div>
<div id="aside">
<h2>The side bar</h2>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
</html>
This is a very common layout with a header, navigation bar, main content, a side bar and a footer.
Next create the style rules, reset and set rules first
* {
margin: 0;
padding: 0;
}
h1, h2 {
font-size: 28px;
line-height: 40px;
padding: 20px;
}
h3 {
font-size: 18px;
line-height: 22px;
padding: 20px;
}
p {
padding: 20px;
}
Resetting all margins and padding for all elements (*) is bad practice, but to keep my code simple I have used it for this example. For more info on reset CSS see here http://meyerweb.com/eric/tools/css/reset/ or Google the subject.
Then create style rules for the layout starting with the html and body elements
html {
font: 13px/22px Helvetica, Arial, sans-serif;
color: #333;
height: 100%;
overflow-y: scroll;
background: #F0F0F0;
}
body {
margin: 0 auto;
width: 940px;
}
In the html element we have defined the font, the font-colour, the background colour and the height. We have also set overflow-y to scroll. This is to add space for the vertical scrollbar in non IE browsers.
We are using the body element as our content wrapper, given it a width and centered the page using the margin property.
Going down the page, we set the rules for the header and navigation/menu bar, both of which are self explanatory.
#header {
color: #FFF;
background: #008800;
height: 85px;
}
#nav {
background: #333;
height: 45px;
}
Don't forget to set the heights if you do not have content that automatically determines the heights
Now comes the important part. We are going to create a table structure using the containing div as our tabel as follows
#content {
display: table;
}
Then come our table cells with display: table-cell and a width. Background colour has been given to the sidebar to show the equal length.
#content #article {
display: table-cell;
width: 80%;
}
#content #aside {
display: table-cell;
width: 20%;
background: #ACACAC;
}
Finally the footer as follows, with same comment about the height as with the header and menu bar.
#footer {
background: #008800;
color: #CCC;
height: 45px;
}
That is it except for our IE6 and IE7. In the head section of our document we can place a conditional statement that targets these browsers and place our alternate style rules within the statement. Make sure that these style rules come after the style rules that we created above.
<!--[if lte IE 8]>
<style>
#content #article {
width: 80%;
float: left;
}
#content #aside {
width: 20%;
float: right;
}
#footer {
clear: both;
}
</style>
<![endif]-->
As final remarks, all style rules should ideally be placed in an external stylesheet and linked to the main document and all property values should be adjusted to suit.
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
