2.5 Companion Containers

div behaviour

This technique relies on one simple fact: a container div will automatically stretch to the height of the tallest container div within it. With this knowledge, we can apply companion containers to container divs. Using a three column layout with header and footer, there are a couple of solutions here depending upon how many background colours are needed in the three columns.

Two colours

If the two flanking columns are to be the same colour and the content column another colour, the solution is very simple. Like above, all we need to add is a container div around the three column divs. Then we add a background colour to the container div (not the flanking column divs) and a background colour to the content column div. And that is it, apart from ensuring the columns minimum height are all set to the viewport height. The container div will be one colour that will then be "chopped out" by the colour of the content column div. The html will be as before and the CSS:

html, body	{height: 100%;}

body		{text-align: center;}

#wrap		{margin: 0 auto;
		width: 900px;
		height: 100%;}

#header 	{width: 900px;
		height: 100px;}

#container	{display: inline;
		float: left;
		background: #ccccff;
		min-height: 100%;
		_height: 100%;}

#content	{display: inline;
		float: left;
		width: 600px;
		margin-left: 150px;
		background: white;}

#leftbox	{display: inline;
		float: left;
		width: 150px;
		margin-left: -900px;}

#rightbox	{display: inline;
		float: left;
		width: 150px;}

#footer 	{clear: both;}

Three Colours

With three colours, i.e. one for eachcolumn, things get a little trickier. The technique here involves placing three container divs around the column divs, each container having a different background colour. Then two of these are offset to reveal the colour of the div(s) underneath. These containers will all expland to the height of the tallest column div contained within, producing equal height coloured columns.

The html would be like this:

<body>
 <div id="wrap">
   <div id="header">
   </div>
   <div id="container1"> /* Extra markup */
   <div id="container2"> /* Extra markup */
   <div id="container3"> /* Extra markup */
   <div id="col1">
   </div>
   <div id="col2">
   </div>
   <div id="col3">
   </div>
   </div>
   </div>
   </div>
   <div id="footer">
   </div>
 </div>
</body>

And the CSS:

html, body	{height:100%;}

body		{text-align:center;}

#wrap		{width:900px;
		height:100%;
		margin:0 auto;
		text-align:left;}

#header		{height:100px;
		background-color:yellow;}

#container1	{position:relative;
		float:left;
		width:100%;
		min-height:100%;
		_height:100%;
		background-color:#99ffff;
		overflow:hidden;}

#container2	{position:relative;
		float:left;
		width:100%;
		min-height:100%;
		_height:100%;
		right:300px;   /* width of col3 */
		background-color:#99ff33;}

#container3	{position:relative;
		float:left;
		width:100%;
		min-height:100%;
		_height:100%;
		right:400px;   /* width of col2 */
		background-color:#cc3333;}


#col1		{position:relative;
		float:left;
		width:200px;
		min-height:100%;
		_height:100%;
		left:700px;
		overflow:hidden;}

#col2		{position:relative;
		float:left;
		width:400px;
		min-height:100%;
		_height:100%;
		left:700px;
		overflow:hidden;}

#col3		{position:relative;
		float:left;
		overflow:hidden;
		width:300px;
		min-height:100%;
		_height:100%;
		left:700px;}

#footer		{clear:both;
		height:100px;
		background-color:yellow;}

You can see the results here. Note the disadvantages of this method are the extra html markup required, plus the CSS can look a little tricky at first. Also note that the content text needs moving away from the edges of the containers. The simplest way to do this and also avoid IE6's box model non-compliance is to add any padding to the contents (eg: p {padding:0px 10px 0px 10px;}). Another method is to introduce gutters by playing around with the widths and offsets of col1,2 & 3.