Page is a not externally linkable
Paul_o_b - 3:17 pm on Dec 27, 2011 (gmt 0)
Hi,
If you are looking for equal columns then you can only do this using the display:table properties available from IE8+ only (or by using some of the new CSS3 box layout modules (with limited browser support as yet)).
To support older browsers such as IE6 then you have to be creative and if you google "css faux columns" or "equal columns in CSS" you will see loads of inventive examples that address this problem. However, the examples do usually require extra divs and a good understanding of how css works to use them properly.
You have already fallen into the beginners trap of expecting 100% height to mean something other than 100% height.:) When you give an element a specific height then that's what it gets (most of the time). So if you say 100% height then the element will be 100% of its parent height and thus never be able to grow. So you can't really use height:100% on any elements that need to expand.
You should also know that you cant just say height:100% and expect it to work because percentage heights must have an immediate parent that has a specific height defined in order to work. This height must be a px or em height (or a percentage height based on another immediate parent that has a height defined). Elements that have their height dictated by their content or by auto height settings or by min-height will not be able to pass down any height to their children.
Suffice to say you will rarely ever be able to use 100% height in a usable way for a fluid height layout. You could set html and body to height:100% and then set the first container on the page to min-height:100% and it will reach the bottom and still grow. However you could not have two or three of these elements and expect them to grow in unison and neither could you nest further elements with min-height because they collapse to height:auto also.
Effectively setting heights is a dead end that you can't go down but have a look at the "sticky footer thread" which explains some of these associated problems.
As I said at the beginning to get equal column effect for older browsers you need to resort to tricks and illusions. Faux columns are easy and need no extra html but you have to make images to provide the background to the columns and then the image is repeated on the main parent (and not on each column) and this provides the equal column effect as the main parent contains the floated columns (assuming you have cleared it properly).
There are other methods such as negative margins, wide borders and ,multiple offset nesting all of which will do the job but at the cost of some complexity.
My favourite technique is an absolute overlay which use an extra empty div for each column and overlays the background over the column with absolute positioning. Only absolute elements can keep pace with relative elements and you can therefore set an absolute overlay to follow a relative divs height using top and bottom co-ordinates. The absolute overlay holds no content so if does not matter that it is removed from the flow.
A short example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
background:#ccc;
color:#000;
}
p, h1 { margin:0 0 1em }
.wrapper {
position: relative;
width: 940px;
margin:auto;
overflow:hidden;
}
.main, .l {
position: relative;
z-index:2;
float: left;
width: 700px;
background-color:#ffffff;
padding:1px 0;
}
.sidebar, .r {
position: relative;
z-index:2;
float: right;
width: 220px;
background-color: #f0f0f0;
padding:1px 0;
}
.r, .l {
position:absolute;
top:0;
right:0;
bottom:0;
width:220px;
z-index:1;
padding:0;
}
* html .1, * html .r {/* ie6 fix*/
top:auto;
bottom:0;
height:9999em;
}
.l {
width:700px;
left:0;
right:auto;
}
.footer {
clear:both;
width:940px;
margin:auto;
background:red;
padding:1px 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="main">
<h1>Main Content</h1>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
<div class="sidebar">
<p>Sidebar content</p>
</div>
<div class="l"></div>
<div class="r"></div>
</div>
<div class="footer">
<p>Footer content</p>
</div>
</body>
</html>
Either column can be the longest and the other one will always keep track.
As I said above faux columns could do this without the extra html but of course you would need to make the images as required.
You must use a valid doctype or all bets are off as IE will resort to behaving much like IE5 and not use any of the css it has learned in this century. Other browsers will also show differences as they will revert to quirks mode which is undesirable (unless you are doing to for a specific reason). Use a full doctype to maintain standards mode and modern browsers will behave much the same.