<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>The Code Project</title>
<!------------------------------------------------------------------------------------------------>
<!-- PLEASE LEAVE THE CODE BELOW, is needed by the article -->
<link type="text/css" rel="stylesheet" href="RelativelySimple/article.css" />
<style>
div#index-container {
float:left;
margin-right:0;
}
div.parent-box {
float:left;
width:250px;
border:solid 1px #993333;
background:#D0E1E1;
}
div.child-box {
border:solid 1px #993333;
background:#FFFFCC;
}
p.ex-hl-descr {
padding:8px 0 10px 0;
margin:65px 15px 65px 15px;
border-top:dashed 1px black;
border-bottom:dashed 1px black;
}
table.example-code td.parent-code {
background-color:#D0E1E1;
}
table.example-code td.child-code {
background-color:#FFFFCC;
}
table.example-code td.grandson-code {
background-color:#D0EEC0;
}
table.example-code td.right-box-code {
background-color:#D0EEC0;
}
div#example-1 div.parent-box {
width:250px;
background:#D0E1E1;
}
div#example-1 div.child-box {
background:#FFFFCC;
}
div#example-2 div.parent-box {
width:250px;
background:#D0E1E1;
}
div#example-2 div.child-box {
background:#FFFFCC;
position:relative;
left:40px;
margin-top:10px;
margin-bottom:10px;
}
div#example-3 div.parent-box {
width:250px;
background:#D0E1E1;
position:relative;
overflow:hidden;
}
div#example-3 div.child-box {
background:#FFFFCC;
position:relative;
left:40px;
}
div.three-stripes div.parent-box {
width:250px;
position:relative;
overflow:hidden;
}
div.three-stripes div.child-box {
position:relative;
width:100%;
left:40px;
}
div.three-stripes div.reset-box {
position:relative;
width:100%;
left:100%;
margin-left:-40px;
background:transparent;
}
div.three-stripes div.grandson-box {
position:relative;
width:100%;
margin-left:-25%;
background:#D0EEC0;
}
div.three-stripes div.content-box {
position:relative;
width:100%;
margin-left:-100%;
left:25%;
background:transparent;
}
div#example-4 div.parent-box {
background:#D0E1E1;
}
div#example-4 div.child-box {
background:#FFFFCC;
border:none;
}
div#example-4-1 div.parent-box {
background:#D0E1E1;
overflow:visible;
}
div#example-4-1 div.child-box {
background:#FFFFCC;
border:none;
margin-top:10px;
margin-bottom:10px;
}
div#example-4-1 div.grandson-box {
margin-top:10px;
margin-bottom:10px;
}
div#example-4-2 div.parent-box {
width:400px;
background:#D0E1E1;
overflow:hidden;
}
div#example-4-2 div.child-box {
background:#FFFFCC;
border:none;
}
div.two-cols div.main-box {
float:left;
position:relative;
width:250px;
overflow:hidden;
}
div.two-cols div.right-box {
position:relative;
width:100%;
left:25%;
}
div.two-cols div.content-box {
position:relative;
width:100%;
left:-25%;
}
div.two-cols div.left {
float:left;
width:25%;
}
div.two-cols div.right {
margin-left:25%;
}
* html div.two-cols div.right {
height: 1%;
margin:0;
}
* html div.left {
margin-right:-3px;
}
div#example-5 div.main-box {
background:#D0E1E1;
border:solid 1px #993333;
}
div#example-5 div.right-box {
background:#FFFFCC;
}
div#example-5 div.right {
color:#AA6633;
}
div#example-5-1 div.main-box {
background:#D0E1E1;
border:solid 1px #993333;
color:gray;
}
div#example-5-1 div.right-box {
background:#FFFFCC;
border-left:solid 10px #993333;
}
div#example-5-2 div.main-box {
background:#D0E1E1;
border:solid 1px #993333;
}
div#example-5-2 div.right-box {
background:#FFFFCC;
border-left:solid 10px #993333;
}
div#example-5-2 div.content-box {
margin-left:-10px;
}
div#example-5-2 div.right {
padding-left:10px;
}
div.three-cols div.main-box {
float:left;
position:relative;
width:250px;
overflow:hidden;
}
div.three-cols div.center-box {
position:relative;
width:100%;
left:25%;
}
div.three-cols div.reset-box {
position:relative;
width:100%;
left:100%;
margin-left:-25%;
}
div.three-cols div.right-box {
position:relative;
width:100%;
margin-left:-40px;
}
div.three-cols div.content-box {
position:relative;
width:100%;
margin-left:-100%;
left:40px;
}
div.three-cols div.left {
float:left;
width:25%;
}
div.three-cols div.right {
float:right;
width:40px;
}
div.three-cols div.center {
margin-left:25%;
margin-right:40px;
}
* html div.three-cols div.center {
height: 1%;
margin:0;
}
* html div.three-cols div.left {
margin-right:-3px;
}
* html div.three-cols div.right {
margin-left:-3px;
}
div#example-6 div.main-box {
background:#D0E1E1;
border:solid 1px #993333;
}
div#example-6 div.center-box {
background:#FFFFCC;
border-left:solid 1px #993333;
}
div#example-6 div.right-box {
background:#D0EEC0;
border-left:solid 1px #993333;
left:-2px;
}
div#example-6 div.center {
padding-left:1px;
padding-right:1px;
}
div#example-6 div.right {
text-align:center;
text-transform:uppercase;
}
div#example-6-1 div.main-box {
width:500px;
background:#D0E1E1;
border:solid 1px #993333;
color:gray;
}
div#example-6-1 div.center-box {
background:#FFFFCC;
border-left:solid 1px #993333;
}
div#example-6-1 div.right-box {
background:#D0EEC0;
border-left:solid 1px #993333;
left:-2px;
}
div#example-6-1 div.center {
padding-left:1px;
padding-right:1px;
}
div#example-6-1 div.right {
text-align:center;
text-transform:uppercase;
}
div#example-1 div.example-label div {
margin-top:50px;
}
div#example-2 div.example-label div {
margin-top:60px;
}
div#example-3 div.example-label div {
margin-top:60px;
}
div#example-4 div.example-label div {
margin-top:230px;
}
div#example-4-1 div.example-label div {
margin-top:65px;
}
div#example-4-2 div.example-label div {
margin-top:35px;
}
div#example-5 div.example-label div {
margin-top:200px;
}
div#example-5-1 div.example-label div {
margin-top:230px;
}
div#example-5-2 div.example-label div {
margin-top:245px;
}
div#example-6 div.example-label div {
margin-top:450px;
}
</style>
<!-------------------------------------------------------------->
</head>
<body class="article">
<!--------------------------------------------------------------------------->
<!------------------------------- STEP 1 --------------------------->
<!-- Fill in the details (CodeProject will reformat this section for you) -->
<pre>
Title: Relatively Simple 3 equal-height columns CSS liquid Layout
Author: Gladstone
Email: gladstone@vene.ws
Member ID: 1477791
Language: HTML, CSS
Platform: Any OS, IE 6/7, Firefox 2, Mozilla 1.7, Opera 9.1, Safari 1.3.2, NN 8.1.3, NN9
Technology: Web, HTML, CSS, Relativeness, Overflow
Level: Advanced
Description: This article tries to explain a new approach to the annoying issue of obtaining a three (or even more) equal-height columns liquid layout with the usage of CSS and (X)HTML only. My own solution avoids faux-columnS and super-padding tricks (and so problems caused by those methods).
Section Web Design
SubSection Layouts, CSS
</pre>
<!------------------------------- STEP 2 --------------------------->
<!-- Include download and sample image information. -->
<ul class=download>
<li><a href="RelativelySimple/examples/3col-empty.html">Look at the empty demo</a></li>
<li><a href="RelativelySimple/examples/3col-cnb.html">Look at the content and border demo</a></li>
<li><a href="RelativelySimple/examples/threecol.css">Look at the CSS file <code>threecol.css</code></a></li>
</ul>
<p><img src="RelativelySimple/examples/3col-demo.jpg" alt="Equal height 3 columns CSS Liquid Layout"></p>
<!------------------------------- STEP 3 --------------------------->
<!-- Add the article text. Please use simple formatting (<h2>, <p> etc) -->
<div id="main" class="heightfix">
<div id="index-container">
<h2>Index</h2>
<ul id="index" class="index">
<li><a class="topic-nav" href="#intro" title="Introduction">Introduction</a>
<ul class="sub-index">
<li><a class="topic-nav" href="#preface" title="Preface">Preface</a></li>
<li><a class="topic-nav" href="#adv-disadv" title="Advantages and Disadvantages">Advantages and Disadvantages</a></li>
</ul>
</li>
<li><a class="topic-nav" href="#method" title="Explains in details the method used">The Method</a>
<ul class="sub-index">
<li><a class="topic-nav" href="#rel-overflow" title="Overview of the main concepts">Relative and overflow</a></li>
<li><a class="topic-nav" href="#more-rel-overflow" title="Further analysis of the layout key concepts">More relative and overflow</a></li>
<li><a class="topic-nav" href="#two-cols" title="First trivial test with two columns">Let's put two cols</a></li>
<li><a class="topic-nav" href="#border" title="Let's introduce a border in the layout">Border is there</a></li>
<li><a class="topic-nav" href="#three-cols" title="Final layout with three columns">The three of them</a></li>
</ul>
</li>
<li><a class="topic-nav" href="#source-code" title="A view at the source code">The Code</a>
<ul class="sub-index">
<li><a class="topic-nav" href="#markup" title="An analysis of the (X)HTML markup">The markup</a></li>
<li><a class="topic-nav" href="#style" title="An analysis of the CSS stylesheet">The style</a></li>
</ul>
</li>
<li><a class="topic-nav" href="#examples" title="Some examples of working layouts using the method described above">Examples</a>
<ul class="sub-index">
<li><a class="topic-nav" href="#three-empty" title="An example page with three empty columns">Three columns empty</a></li>
<li><a class="topic-nav" href="#three-content" title="An example page with three columns and some contents">Three columns and content</a></li>
<li><a class="topic-nav" href="#three-cnb" title="An example page with three columns, some contents and borders">Three columns, content and border</a></li>
<li><a class="topic-nav" href="#four-cols" title="An example page with four columns">Four columns</a></li>
<li><a class="topic-nav" href="#five-cols" title="A test page with five columns, for teaching purposes">Five columns?</a></li>
</ul>
</li>
<li><a class="topic-nav" href="#notes" title="Notes about the article and the method described within">Notes</a>
<ul class="sub-index">
<li><a class="topic-nav" href="#issues" title="Layout problems encountered">Layout issues</a></li>
<li><a class="topic-nav" href="#more-cols" title="Tips and instructions on how to use more than three columns in the layout">The more columns than I could</a></li>
</ul>
</li>
</ul>
</div>
<div id="demo-container">
<div class="demo-view heightfix">
<div class="title">Live Demo</div>
<div class="demo-content">
<a class="demo-link heightfix" href="RelativelySimple/examples/3col-empty.html" title="Have a look at the 3col layout demonstration page" target="_blank"><div><span class="hover">>> </span>Demo Page<span class="hover"> <<</span></div></a>
</div>
</div>
</div>
<div id="content" style="clear:both;" class="heightfix">
<a name="intro"><h1>Introduction</h1></a>
<br class="topic-separator" />
<a name="preface"><h2>Preface</h2></a>
<p class="content">
All web developers know it, it�s one of the most annoying problems when facing to the creation of (X)HTML CSS-based layouts: the <i>3 <b>equal-height</b> columns layout</i>. The best solution so far was (or it�s still if you�re going to dislike my own solution) the faux-column method, which uses background images to simulate columns. The problem is that I�m working at a large project which should be the more <i>flexible</i> than it could and the faux-column method isn't the best example of flexibility.<br/>
My solution tries to satisfy flexibility needs allowing the usage of 2 up to 3, 4 or even more equal-height columns with background colors specified only through <code>background-color</code> CSS property.
<br/><br/><strong>Note</strong>: I had to change some article styles to have it working with the codeproject.com website, because the latter is not XHTML compliant, but I left code in the examples as it should be for XHTML pages, because this solution is thought to work only with XHTML and I don't support HTML requests (like "this doesn't work in my HTML 3.0 website" etc.).
</p>
<br class="topic-separator" />
<a name="adv-disadv"><h2>Advantages and Disadvantages</h2></a>
<p class="content">Like every other solution, mine also has advantages and disadvantages. As always it's all about what you get and what you loose in getting it.</p>
<a name="adv"><h4>Advantages:</h4></a>
<ul style="margin-top:6px;text-align:left;">
<li><i>Very flexible liquid layout which lets you use mixed dimensions (for example a pixel-fixed left column and a percentage-fixed right one)</i></li>
<li><i><strong>Elastic center column</strong> which resizes when needed</i></li>
<li><i>No faux columns (no need for images)</i></li>
<li><i>Only XHTML and CSS are used, no scripts and no conditional comments</i></li>
<li><i>Works with all modern browsers (IE 6/7, Firefox 2, Mozilla 1.7, Opera 9.1, Safari 1.3.2, NN 8.1.3 partially - see <a href="#notes">Notes</a>, NN 9)</i></li>
</ul>
<a name="disadv"><h4>Disadvantages:</h4></a>
<ul style="margin-top:6px;">
<li><i>Markup is a bit heavy using some extra <code>div</code>s</i></li>
<li><i>CSS also is a bit heavy using 3 hacks and 2 fixes</i></li>
<li><strong>[update: fixed in NN 9]</strong> <i style="color:gray">There's an unsolved problem with Netscape when in firefox-like behavior (see <a href="#notes">Notes</a>)</i></li>
<li><i>Probably others</i></li>
</ul>
<a name="method"><h1>The Method</h1></a>
<br class="topic-separator" />
<a name="rel-overflow"><h2>Relative and overflow</h2></a>
<p class="content">Having three vertical columns with the center one elastic is very trivial in HTML. It's all about putting 3 <code>div</code>s near each other and <code>float</code>ing them. To make those columns appear of the same height, however, we have to make their backgrounds appear of the same height. A key feature of HTML language is that each container (mainly each element) has a default transparent background thus making it possible to have a (theorically) infinite amount of overlapping layers with the latter having the same background as the first one (if no subsequent <code>background-color</code> is set).</p>
<p class="content">So the problem of having three equal-height columns just comes down in obtaining, in some way, <strong>a <em>view</em> separated in 3 stripes</strong> of the same height upon which we put the 3 divs which actually contain the columns.
<br/>When thinking about a way to obtain this <em>3-stripes-view</em>, I started pointing my mind at what I was in need of first: that is, a way to make some html elements to have the same height whatever is the higher between them. As we know, this is possible by using block-level elements each inside the other. So, what we all need, is to put <code>div</code>s each inside one other and move them in some way to obtain our three stripes <em>view</em>, upon which we can put, as I said, our three <em>real</em> (that is, physical) columns. This is just possible using CSS properties <code>position: relative</code> (which lets us shift the child <code>div</code>s) and <code>overflow: hidden</code> (which lets us hide those portions of child <code>div</code>s which otherwise would overflow the parent space).
<br/>Let's see how the all thing works:</p>
<p class="content">Here we have some examples which explain step by step and in details how key concepts work. Each example includes 2 <code>div</code>s, one with a blue-like background (<code>div.parent-box</code>) and the other with a yellow-like background (<code>div.child-box</code>). Those <code>div</code>s represent what we're going to do later to create page-wide columns. The blue <code>div</code> is the <strong>container</strong> box while the yellow one is the <strong>contained</strong> box. Near the example box there's a table which shows CSS properties set for the elments respectively. I put in there only the most important and removed those added only to make things appear more clear (like the <code>border</code>s).</p>
<p class="example-capt">The first one is an empty example. That is, the two simple parent and child <code>div</code>s:</p>
<div class="example" id="example-1">
<div class="ex-lab-bg">
<div class="ex-reset clearfix">
<div class="example-label"><div>e<br/>x<br/>a<br/>m<br/>p<br/>l<br/>e<br/><br/>1</div></div>
<div class="example-body clearfix">
<div class="example-code">
<table class="example-code">
<tr class="header">
<td class="mark-up" colspan="2">Mark-up</td>
</tr>
<tr class="code">
<td class="mark-up" colspan="2">
<pre class="code-view">
<div class="parent-box">
<div class="child-box">
</div>
</div>
</pre>
</td>
</tr>
<tr class="header">
<td class="parent-code">Parent Styles</td>
<td class="child-code">Child Styles</td>
</tr>
<tr class="code">
<td class="parent-code">
<ul class="code">
<li>width: 250px;</li>
<li class="last">background: #00CCCC;</li>
</ul>
</td>
<td class="child-code">
<ul class="code">
<li class="last">background: #FFFFCC;</li>
</ul>
</td>
</tr>
</table>
</div>
<div class="parent-box">
<div class="child-box">
<p class="ex-hl-descr">Here the <code>div</code>s are just one inside another so we can see the child one only, because it fills all the parent space.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="example-capt">The second example introduces the concept of relativeness:</p>
<div class="example" id="example-2">
<div class="ex-lab-bg">
<div class="ex-reset clearfix">
<div class="example-label"><div>e<br/>x<br/>a<br/>m<br/>p<br/>l<br/>e<br/><br/>2</div></div>
<div class="example-body clearfix">
<div class="example-code">
<table class="example-code">
<tr class="header">
<td class="mark-up" colspan="2">Mark-up</td>
</tr>
<tr class="code">
<td class="mark-up" colspan="2">
<pre class="code-view">
<div class="parent-box">
<div class="child-box">
</div>
</div>
</pre>
</td>
</tr>
<tr class="header">
<td class="parent-code">Parent Styles</td>
<td class="child-code">Child Styles</td>
</tr>
<tr class="code">
<td class="parent-code">
<ul class="code">
<li class="unchanged-code">width: 250px;</li>
<li class="last unchanged-code">background: #00CCCC;</li>
</ul>
</td>
<td class="child-code">
<ul class="code">
<li class="unchanged-code">background: #FFFFCC;</li>
<li>position: relative;</li>
<li>left: 40px;</li>
<li class="last">margin: 10px 0;</li>
</ul>
</td>
</tr>
</table>
</div>
<div class="parent-box">
<div class="child-box">
<p class="ex-hl-descr">Here the child <code>div</code> is shifted a bit away from the left. I put top and bottom margins in the child box to highlight the change.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="example-capt">The following example instead shows what happens when the overflow property of the parent is set to <code>overflow: hidden</code>. As you can see, the child box is cut off where the parent one outlines end:</p>
<div class="example" id="example-3">
<div class="ex-lab-bg">
<div class="ex-reset clearfix">
<div class="example-label"><div>e<br/>x<br/>a<br/>m<br/>p<br/>l<br/>e<br/><br/>3</div></div>
<div class="example-body clearfix">
<div class="example-code">
<table class="example-code">
<tr class="header">
<td class="mark-up" colspan="2">Mark-up</td>
</tr>
<tr class="code">
<td class="mark-up" colspan="2">
<pre class="code-view">
<div class="parent-box">
<div class="child-box">
</div>
</div>
</pre>
</td>
</tr>
<tr class="header">
<td class="parent-code">Parent Styles</td>
<td class="child-code">Child Styles</td>
</tr>
<tr class="code">
<td class="parent-code">
<ul class="code">
<li class="unchanged-code">width: 250px;</li>
<li class="unchanged-code">background: #00CCCC;</li>
<li>position: relative;</li>
<li class="last">overflow: hidden;</li>
</ul>
</td>
<td class="child-code">
<ul class="code">
<li class="unchanged-code">background: #FFFFCC;</li>
<li class="unchanged-code">position: relative;</li>
<li class="unchanged-code">left: 40px;</li>
<li class="last removed-code">margin: 10px 0;</li>
</ul>
</td>
</tr>
</table>
</div>
<div class="parent-box">
<div class="child-box">
<p class="ex-hl-descr" style="padding-right:30px;">Here the child <code>div</code> is shifted a bit away from the left as before. I removed margins and added a <code>right-padding</code> to the current paragraph of text to make the text more readable.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<br class="topic-separator" />
<a name="more-rel-overflow"><h2>More relative and overflow</h2></a>
<p class="content">Now that we've seen how the base concepts work, let's make it all a bit more complicated, using 3 divs (those that will be our page-wide columns at the end).</p>
<p class="content">As seen before we can create a <em>stripe</em> (that is, a column background) simply by setting the parent background color to the color we want for that stripe and then shifting the child box of an amount equal to the width we want for the stripe/column.
<br/>When adding 3 stripes though, when we shift the first child, the second child will obviously shift too (we can call this second child the <em>grandson</em>, being the child of the child of the parent). Since we have to shift the grandson from the right (to create a right stripe) we need to make the grandson left margin overlap the parent right margin (should we call it the grandfather?). In such a way we'll be able to put a relative shift from the right equal to the width of the right column we want.
<br/>The best way to make those margins overlap, is to reset the position of the child, that is to make the left margins overlap and then add a <code>margin-left</code> of 100%. We're going to do this using an additional container between the child and the grandson, applying those styles to this new container, which will be called <code>reset-box</code>. After this we'll have the grandson left margin overlaps the <em>grandfather</em> right margin. Now all we need is to right-shift the grandson of the amount we want the right column width of.
<br/>The last thing to do is to adjust the content position. In fact all the contents now lay where the grandson box do. Simply applying the same method as before, we add an additional container between the grandson and the contents, calling it <code>content-box</code>. Then we relatively left-shift it of the amount of the right column and we set its <code>left-margin</code> to -100% (note the minus), thus making its left margin to overlap the left margin of the original parent (the grandfather).
</p>
<p class="example-capt">The following example shows the result of the above speculation. The width chosen for the left column is <strong>40px</strong> while the right columns width is <strong>25%</strong>. Look at the mark-up and new styles very carefully to understand well where the above width values go and how does the all thing work:</p>
<div class="example three-stripes" id="example-4">
<div class="ex-lab-bg">
<div class="ex-reset clearfix">
<div class="example-label"><div>e<br/>x<br/>a<br/>m<br/>p<br/>l<br/>e<br/><br/>4</div></div>
<div class="example-body clearfix">
<div class="example-code">
<table class="example-code">
<tr class="header">
<td class="mark-up" colspan="2">Mark-up</td>
</tr>
<tr class="code">
<td class="mark-up" colspan="2">
<pre class="code-view">
<div class="parent-box">
<div class="child-box">
<div class="reset-box">
<div class="grandson-box clearfix heightfix">
<div class="content-box">
</div>
</div>
</div>
</div>
</div>
</pre>
</td>
</tr>
<tr class="header">
<td class="parent-code">Parent Styles</td>
<td class="child-code">Child Styles</td>
</tr>
<tr class="code">
<td class="parent-code">
<ul class="code">
<li class="unchanged-code">width: 250px;</li>
<li class="unchanged-code">background: #00CCCC;</li>
<li class="unchanged-code">position: relative;</li>
<li class="last unchanged-code">overflow: hidden;</li>
</ul>
</td>
<td class="child-code">
<ul class="code">
<li class="unchanged-code">background: #FFFFCC;</li>
<li class="unchanged-code">position: relative;</li>
<li class="unchanged-code">left: 40px;</li>
<li class="last">width: 100%;</li>
</ul>
</td>
</tr>
<tr class="header">
<td class="reset-code">Reset Styles</td>
<td class="grandson-code">Grandson Styles</td>
</tr>
<tr class="code">
<td class="reset-code">
<ul class="code">
<li>position: relative;</li>
<li>width: 100%;</li>
<li>left: -40px;</li>
<li>margin-left: 100%;</li>
<li class="last">background: transparent;</li>
</ul>
</td>
<td class="grandson-code">
<ul class="code">
<li>position: relative;</li>
<li>width: 100%;</li>
<li>left: -25%;</li>
<li class="last">background: #D0EEC0;</li>
</ul>
</td>
</tr>
<tr class="header">
<td class="content-code">Content Styles</td>
</tr>
<tr class="code">
<td class="content-code">
<ul class="code">
<li>position: relative;</li>
<li>width: 100%;</li>
<li>left: 25%;</li>
<li>margin-left: -100%;</li>
<li class="last">background: transparent;</li>
</ul>
</td>
</tr>
</table>
</div>
<div class="parent-box">
<div class="child-box">
<div class="reset-box">
<div class="grandson-box clearfix heightfix">
<div class="content-box">
<p class="ex-hl-descr">As you can see, now we have the 3 stripes view we were trying to obtain. The mark-up is a lot more tricky than in previous examples.
<br/>In fact we use 5 <code>div</code>s instead of 2 as usual, so we have 3 extra <code>div</code>s; also having 3 stripes requieres the usage of two fixes, the <code>clearfix</code> and the <code>heightfix</code>.
<br/>
<br style="font-size:5px;"/>
Also, the code will get more tricky when we'll be adding border to the columns. I'll get through this later, in a paragraph below.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="example-capt">The following example shows the same example as above (Example 4) but with the parent blue-like box CSS property overflow set to <code>overflow: visible</code> thus making the contained boxes fully visible. Also, I put in some margins to make things more clear.</p>
<div class="example three-stripes" id="example-4-1">
<div class="ex-lab-bg">
<div class="ex-reset clearfix">
<div class="example-label"><div>e<br/>x<br/>a<br/>m<br/>p<br/>l<br/>e<br/><br/>4<br/>.<br/>1</div></div>
<div class="example-body clearfix">
<div class="parent-box">
<div class="child-box clearfix heightfix">
<div class="reset-box">
<div class="grandson-box clearfix heightfix">
<div class="content-box">
<p class="ex-hl-descr">This is the same example as above but with <code>overflow: visible</code> set for the parent box (blue-like one) and with some margins to see how and where al the containers go.
<br/>Have a look at the mark-up and styles in the example 4 above to understand how the all thing works.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="example-capt">The following example shows the same example as above (Example 4) but with the parent blue-like box width set to a higher value: <code>width: 400px</code>. Note that changing the width of the layout required only the change of a single CSS value for the main container. Note also that because we chose a percentage fixed width of 25% for the right column, this also changed its size accordingly.</p>
<div class="example three-stripes" id="example-4-2">
<div class="ex-lab-bg">
<div class="ex-reset clearfix">
<div class="example-label"><div>e<br/>x<br/>a<br/>m<br/>p<br/>l<br/>e<br/><br/>4<br/>.<br/>2</div></div>
<div class="example-body clearfix">
<div class="parent-box">
<div class="child-box">
<div class="reset-box">
<div class="grandson-box clearfix heightfix">
<div class="content-box">
<p class="ex-hl-descr">This is the same as the example 4 but with the width of the main container increased to 400px.
<br/>This simple change not only made the entire layout wider without malfunctions or problems, but also made the right column (which width was set to 25%) change its width accordingly, while the center filled the remaining space. This is what I mean for flexibility.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br class="topic-separator" />
<a name="two-cols"><h2>Let's put two cols</h2></a>
<p class="content">Now that we've looked at how the key concepts work, let's make a first example with two columns. It will have about the same structure of first three two-stripes examples, but in addition its contents will be floated to create the physical structure of the two columns.</p>
<p class="content">From now on we're going to change names (and so CSS classes) through which we'll be referring to container <code>div</code>s in the future. The reason for this change is that from now on we'll be talking about columns (also physical ones) so stripe <code>div</code>s (those <code>div</code>s we use to create columns backgrounds) will be called as the column they're the background of, apart from the main container (the one which contains everything else), which will be called, strangely enough, <code>main-box</code>.</p>
<p class="example-capt">The following example shows a two columns example. Note that as always, for clarity, I didn't put any border style in the CSS code table cell although the <code>main-box</code> container <code>div</code> got a dark-red solid one:</p>
<div class="example two-cols" id="example-5">
<div class="ex-lab-bg">
<div class="ex-reset clearfix">
<div class="example-label"><div>e<br/>x<br/>a<br/>m<br/>p<br/>l<br/>e<br/><br/>5</div></div>
<div class="example-body clearfix">
<div class="example-code">
<table class="example-code">
<tr class="header">
<td class="mark-up" colspan="2">Mark-up</td>
</tr>
<tr class="code">
<td class="mark-up" colspan="2">
<pre class="code-view">
<div class="main-box">
<div class="right-box">
<div class="content-box clearfix heightfix">
<div class="left">
</div>
<div class="right">
</div>
</div>
</div>
</div>
</pre>
</td>
</tr>
<tr class="header">
<td class="parent-code">main-box Styles</td>
<td class="child-code">right-box Styles</td>
</tr>
<tr class="code">
<td class="parent-code">
<ul class="code">
<li>position: relative;</li>
<li>width: 250px;</li>
<li>background: #00CCCC;</li>
<li class="last">overflow: hidden;</li>
</ul>
</td>
<td class="child-code">
<ul class="code">
<li>position: relative;</li>
<li>width: 100%;</li>
<li>background: #FFFFCC;</li>
<li class="last">left: 25%;</li>
</ul>
</td>
</tr>
<tr class="header">
<td class="content-code">content-box Styles</td>
<td class="left-code">left Styles</td>
</tr>
<tr class="code">
<td class="content-code">
<ul class="code">
<li>position: relative;</li>
<li>width: 100%;</li>
<li>left: -25%;</li>
<li class="last unchanged-code">background: transparent;</li>
</ul>
</td>
<td class="left-code">
<ul class="code">
<li>width: 25%;</li>
<li>float: left;</li>
<li class="last unchanged-code">background: transparent;</li>
</ul>
</td>
</tr>
<tr class="header">
<td class="right-code">right Styles</td>
<td class="right-code hack-code">ie right Styles</td>
</tr>
<tr class="code">
<td class="right-code">
<ul class="code">
<li>margin-left: 25%;</li>
<li class="last unchanged-code">background: transparent;</li>
</ul>
</td>
<td class="right-code hack-code">
<ul class="code">
<li>height: 1%;</li>
<li class="last">margin: 0;</li>
</ul>
</td>
</tr>
<tr class="header">
<td class="left-code hack-code">ie left Styles</td>
</tr>
<tr class="code">
<td class="left-code hack-code">
<ul class="code">
<li class="last">margin-right: -3px;</li>
</ul>
</td>
</tr>
</table>
</div>
<div class="main-box">
<div class="right-box">
<div class="content-box clearfix heightfix">
<div class="left">
This is the left col. It wraps well on stripe margin.
</div>
<div class="right">
I did not put padding, margins or any type of layout logic into the columns text. Although this make the columns appear ugly, it also shows how the things work and how the stripe margins are respected by the physical columns.
<br/>As you can see text wraps exactly where the stripe (that is, the column background) ends, thus it makes the stripe appear as being the real column.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="example-capt hack-code clearfix heightfix">
<span class="title">IE 3px gap Hacks</span>
<p class="hack-code">
As you can see in the code table above, there are two cells more than usual in the last two rows, which headers are respectively <em>IE right Styles</em> and <em>IE left Styles</em>. It means that those styles work only for Internet Explorer (version 6 or lower) and are applied using the special <code>* html</code> selector.
<br/>This is the CSS code which actually gets the job done:</p>
<pre class="code-view">
* html div.two-cols div.right {
height: 1%;
margin: 0;
}
* html div.two-cols div.left {
margin-right:-3px;
}
</pre>
<p class="hack-code">Those hacks are meant to remove the 3px space between the left and the right column.
<br />In the future, when we'll be working on 3 columns layouts, the right styles will be applied to center column, and both left and right columns will have a negative margin to avoid the gap.
</p>
</div>
<br class="topic-separator" />
<a name="border"><h2>Border is there</h2></a>
<p class="content">As I mentioned above, all the thing get a bit more tricky when border comes. Although there are no changes when adding external borders, in fact you simply have to set respective borders in <code>main-box</code> container (<code>border-left</code> for the left border of the left column, <code>top-border</code> for the top border and so on) problems come out when you try to add borders between columns.
<br/>The reason is that when you put a border in a container, the border of the child of the container won't overlap the border of the parent, instead it will be put just <strong>next</strong> it. So, when relatively shifting our child <code>div</code>s, their position will be further moved by an amount equal to the previous border size.
</p>
<p class="example-capt">The following example is about the same of Example 5 (I used the same textual contents too) but with a border added between the two columns. This is possible by setting the <code>right-box</code> container <code>border-left</code> CSS property. I put a large border (10px) to highlight the problem:</p>
<div class="example two-cols" id="example-5-1">
<div class="ex-lab-bg">
<div class="ex-reset clearfix">
<div class="example-label"><div>e<br/>x<br/>a<br/>m<br/>p<br/>l<br/>e<br/><br/>5<br/>.<br/>1</div></div>
<div class="example-body clearfix">
<div class="example-code">
<table class="example-code">
<tr class="header">
<td class="mark-up" colspan="2">Mark-up</td>
</tr>
<tr class="code">
<td class="mark-up" colspan="2">
<pre class="code-view">
<div class="main-box">
<div class="right-box">
<div class="content-box clearfix heightfix">
<div class="left">
</div>
<div class="right">
</div>
</div>
</div>
</div>
</pre>
</td>
</tr>
<tr class="header">
<td class="parent-code">main-box Styles</td>
<td class="child-code">right-box Styles</td>
</tr>
<tr class="code">
<td class="parent-code">
<ul class="code">
<li class="unchanged-code">position: relative;</li>
<li class="unchanged-code">width: 250px;</li>
<li class="unchanged-code">background: #00CCCC;</li>
<li class="last unchanged-code">overflow: hidden;</li>
</ul>
</td>
<td class="child-code">
<ul class="code">
<li class="unchanged-code">position: relative;</li>
<li class="unchanged-code">width: 100%;</li>
<li class="unchanged-code">background: #FFFFCC;</li>
<li class="unchanged-code">left: 25%;</li>
<li>border-style: solid;</li>
<li>border-color: #993333;</li>
<li class="last">border-left-width: 10px;</li>
</ul>
</td>
</tr>
<tr class="header">
<td class="content-code">content-box Styles</td>
<td class="left-code">left Styles</td>
</tr>
<tr class="code">
<td class="content-code">
<ul class="code">
<li class="unchanged-code">position: relative;</li>
<li class="unchanged-code">width: 100%;</li>
<li class="unchanged-code">left: -25%;</li>
<li class="last unchanged-code">background: transparent;</li>
</ul>
</td>
<td class="left-code">
<ul class="code">
<li class="unchanged-code">width: 25%;</li>
<li class="unchanged-code">float: left;</li>
<li class="last unchanged-code">background: transparent;</li>
</ul>
</td>
</tr>
<tr class="header">
<td class="right-code">right Styles</td>
<td class="right-code hack-code">ie right Styles</td>
</tr>
<tr class="code">
<td class="right-code">
<ul class="code">
<li class="unchanged-code">margin-left: 25%;</li>
<li class="last unchanged-code">background: transparent;</li>
</ul>
</td>
<td class="right-code hack-code">
<ul class="code">
<li class="unchanged-code">height: 1%;</li>
<li class="last unchanged-code">margin: 0;</li>
</ul>
</td>
</tr>
<tr class="header">
<td class="left-code hack-code">ie left Styles</td>
</tr>
<tr class="code">
<td class="left-code hack-code">
<ul class="code">
<li class="last unchanged-code">margin-right: -3px;</li>
</ul>
</td>
</tr>
</table>
</div>
<div class="main-box">
<div class="right-box">
<div class="content-box clearfix heightfix">
<div class="left">
This is the left col. It wraps well on stripe margin.
</div>
<div class="right">
I did not put padding, margins or any type of layout logic into the columns text. Although this make the columns appear ugly, it also shows how the things work and how the stripe margins are respected by the physical columns.
<br/>As you can see text wraps exactly where the stripe (that is, the column background) ends, thus it makes the stripe appear as being the real column.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="example-capt">As you can see the layout is all moved to the right by the same size as the width of the border. So, the only thing we need to do, is to reset the final position of the whole layout from the right, of the same amount as the left border width said above (10px). In addition we need to put a <code>padding-left</code> of the same dimension in the <code>right</code> <code>div</code> to avoid the latter overlapping the border.</p>
<p class="example-capt">The following example is about the same of Example 5.1 but with the two changes mentioned above, to adjust the layout with the border:</p>
<div class="example two-cols" id="example-5-2">
<div class="ex-lab-bg">
<div class="ex-reset clearfix">
<div class="example-label"><div>e<br/>x<br/>a<br/>m<br/>p<br/>l<br/>e<br/><br/>5<br/>.<br/>2</div></div>
<div class="example-body clearfix">
<div class="example-code">
<table class="example-code">
<tr class="header">
<td class="mark-up" colspan="2">Mark-up</td>
</tr>
<tr class="code">
<td class="mark-up" colspan="2">
<pre class="code-view">
<div class="main-box">
<div class="right-box">
<div class="content-box clearfix heightfix">
<div class="left">
</div>
<div class="right">
</div>
</div>
</div>
</div>
</pre>
</td>
</tr>
<tr class="header">
<td class="parent-code">main-box Styles</td>
<td class="child-code">right-box Styles</td>
</tr>
<tr class="code">
<td class="parent-code">
<ul class="code">
<li class="unchanged-code">position: relative;</li>
<li class="unchanged-code">width: 250px;</li>
<li class="unchanged-code">background: #00CCCC;</li>
<li class="last unchanged-code">overflow: hidden;</li>
</ul>
</td>
<td class="child-code">
<ul class="code">
<li class="unchanged-code">position: relative;</li>
<li class="unchanged-code">width: 100%;</li>
<li class="unchanged-code">background: #FFFFCC;</li>
<li class="unchanged-code">left: 25%;</li>
<li class="unchanged-code">border-style: solid;</li>
<li class="unchanged-code">border-color: #993333;</li>
<li class="last unchanged-code">border-left-width: 10px;</li>
</ul>
</td>
</tr>
<tr class="header">
<td class="content-code">content-box Styles</td>
<td class="left-code">left Styles</td>
</tr>
<tr class="code">
<td class="content-code">
<ul class="code">
<li class="unchanged-code">position: relative;</li>
<li class="unchanged-code">width: 100%;</li>
<li class="unchanged-code">left: -25%;</li>
<li class="unchanged-code">background: transparent;</li>
<li class="last">margin-left: -10px;</li>
</ul>
</td>
<td class="left-code">
<ul class="code">
<li class="unchanged-code">width: 25%;</li>
<li class="unchanged-code">float: left;</li>
<li class="last unchanged-code">background: transparent;</li>
</ul>
</td>
</tr>
<tr class="header">
<td class="right-code">right Styles</td>
<td class="right-code hack-code">ie right Styles</td>
</tr>
<tr class="code">
<td class="right-code">
<ul class="code">
<li class="unchanged-code">margin-left: 25%;</li>
<li class="unchanged-code">background: transparent;</li>
<li class="last">padding-left: 10px;</li>
</ul>
</td>
<td class="right-code hack-code">
<ul class="code">
<li class="unchanged-code">height: 1%;</li>
<li class="last unchanged-code">margin: 0;</li>
</ul>
</td>
</tr>
<tr class="header">
<td class="left-code hack-code">ie left Styles</td>
</tr>
<tr class="code">
<td class="left-code hack-code">
<ul class="code">
<li class="last unchanged-code">margin-right: -3px;</li>
</ul>
</td>
</tr>
</table>
</div>
<div class="main-box">
<div class="right-box">
<div class="content-box clearfix heightfix">
<div class="left">
This is the left col. It wraps well on stripe margin.
</div>
<div class="right">
I did not put padding, margins or any type of layout logic into the columns text. Although this make the columns appear ugly, it also shows how the things work and how the stripe margins are respected by the physical columns.
<br/>As you can see now the text wraps again exactly where the stripe (that is, the column background) ends, thus it makes the stripe appear as being the real column and the border as being a real column border.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br class="topic-separator" />
<a name="three-cols"><h2>The three of them</h2></a>
<p class="content">Now that all the key concepts were discussed, we can introduce our first complete example with the infamous three columns.</p>
<p class="example-capt">The following example shows our final 3 equal-height columns structure. As you can see from the mark-up code below, the <code>right-box</code> changed its name to <code>center-box</code> because it became the center of our layout because of the new green-like right column inserted. Apart from changing name, the CSS styles remained unchanged. Also note that in the example below (Example 6) the width settings are <strong>25%</strong> for the left column and <strong>40px</strong> for the right one, with the center column filling the remaining space:</p>
<div class="example three-cols" id="example-6">
<div class="ex-lab-bg">
<div class="ex-reset clearfix">
<div class="example-label"><div>e<br/>x<br/>a<br/>m<br/>p<br/>l<br/>e<br/><br/>6</div></div>
<div class="example-body clearfix">
<div class="example-code">
<table class="example-code">
<tr class="header">
<td class="mark-up" colspan="2">Mark-up</td>
</tr>
<tr class="code">
<td class="mark-up" colspan="2">
<pre class="code-view">
<div class="main-box">
<div class="center-box">
<div class="reset-box">
<div class="right-box">
<div class="content-box clearfix heightfix">
<div class="left">
</div>
<div class="right">
</div>
<div class="center">
</div>
</div>
</div>
</div>
</div>
</div>
</pre>
</td>
</tr>
<tr class="header">
<td class="parent-code">main-box Styles</td>
<td class="child-code">center-box Styles</td>
</tr>
<tr class="code">
<td class="parent-code">
<ul class="code">
<li class="unchanged-code">position: relative;</li>
<li class="unchanged-code">width: 250px;</li>
<li class="unchanged-code">background: #00CCCC;</li>
<li class="last unchanged-code">overflow: hidden;</li>
</ul>
</td>
<td class="child-code">
<ul class="code">
<li>position: relative;</li>
<li>width: 100%;</li>
<li>background: #FFFFCC;</li>
<li>left: 25%;</li>
<li>border-style: solid;</li>
<li>border-color: #993333;</li>
<li class="last">border-left-width: 1px;</li>
</ul>
</td>
</tr>
<tr class="header">
<td class="reset-code">reset-box Styles</td>
<td class="right-box-code">right-box Styles</td>
</tr>
<tr class="code">
<td class="reset-code">
<ul class="code">
<li>position: relative;</li>
<li>width: 100%;</li>
<li>left: 100%;</li>
<li>margin-left: -25%;</li>
<li class="last unchanged-code">background: transparent;</li>
</ul>
</td>
<td class="right-box-code">
<ul class="code">
<li class="unchanged-code">position: relative;</li>
<li class="unchanged-code">width: 100%;</li>
<li>background: #D0EEC0;</li>
<li>left: -2px;</li>
<li class="unchanged-code">border-style: solid;</li>
<li class="unchanged-code">border-color: #993333;</li>
<li>border-left-width: 1px;</li>
<li class="last">margin-left: -40px;</li>
</ul>
</td>
</tr>
<tr class="header">
<td class="content-code">content-box Styles</td>
<td class="left-code">left Styles</td>
</tr>
<tr class="code">
<td class="content-code">
<ul class="code">
<li class="unchanged-code">position: relative;</li>
<li class="unchanged-code">width: 100%;</li>
<li class="unchanged-code">background: transparent;</li>
<li>left: 40px;</li>
<li class="last">margin-left: -100%;</li>
</ul>
</td>
<td class="left-code">
<ul class="code">
<li class="unchanged-code">width: 25%;</li>
<li class="unchanged-code">float: left;</li>
<li class="last unchanged-code">background: transparent;</li>
</ul>
</td>
</tr>
<tr class="header">
<td class="right-code">right Styles</td>
<td class="center-code">center Styles</td>
</tr>
<tr class="code">
<td class="right-code">
<ul class="code">
<li class="removed-code">margin-left: 25%;</li>
<li class="unchanged-code">background: transparent;</li>
<li class="removed-code">padding-left: 10px;</li>
<li>width: 40px;</li>
<li class="last">float: right;</li>
</ul>
</td>
<td class="center-code">
<ul class="code">
<li>margin-left: 25%;</li>
<li>margin-right: 40px;</li>
<li>padding-left: 1px;</li>
<li>padding-right: 1px;</li>
<li class="last unchanged-code">background: transparent;</li>
</ul>
</td>
</tr>
<tr class="header">
<td class="right-code hack-code">ie center Styles</td>
<td class="left-code hack-code">ie left Styles</td>
</tr>
<tr class="code">
<td class="right-code hack-code">
<ul class="code">
<li class="unchanged-code">height: 1%;</li>
<li class="last unchanged-code">margin: 0;</li>
</ul>
</td>
<td class="left-code hack-code">
<ul class="code">
<li class="last">margin-right: -3px;</li>
</ul>
</td>
</tr>
<tr class="header">
<td class="left-code hack-code">ie right Styles</td>
</tr>
<tr class="code">
<td class="left-code hack-code">
<ul class="code">
<li class="last">margin-left: -3px;</li>
</ul>
</td>
</tr>
</table>
</div>
<div class="main-box">
<div class="center-box">
<div class="reset-box">
<div class="right-box">
<div class="content-box clearfix heightfix">
<div class="left">
This is the left col. It wraps well on stripe margin.
</div>
<div class="right">
r<br/>i<br/>g<br/>h<br/>t<br/><br/>c<br/>o<br/>l<br/>u<br/>m<br/>n
</div>
<div class="center">
I did not put padding, margins or any type of layout logic into the columns text. Although this make the columns appear ugly, it also shows how the things work and how the stripe margins are respected by the physical columns.
<br/>As you can see now the text wraps again exactly where the stripe (that is, the column background) ends, thus it makes the stripe appear as being the real column and the border as being a real column border.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="example-capt">The following is the same of Example 6, apart from the wider <code>main-box</code> container. I increased its width to show how the layout is flexible and can adapt itself to the space it is put in. I left the same textual contents within the columns to highlight the difference:</p>
<div class="example three-cols" id="example-6-1">
<div class="ex-lab-bg">
<div class="ex-reset clearfix">
<div class="example-label"><div>e<br/>x<br/>a<br/>m<br/>p<br/>l<br/>e<br/><br/>6<br/>.<br/>1</div></div>
<div class="example-body clearfix">
<div class="main-box">
<div class="center-box">
<div class="reset-box">
<div class="right-box">
<div class="content-box clearfix heightfix">
<div class="left">
This is the left col. It wraps well on stripe margin.
</div>
<div class="right">
r<br/>i<br/>g<br/>h<br/>t<br/><br/>c<br/>o<br/>l<br/>u<br/>m<br/>n
</div>
<div class="center">
I did not put padding, margins or any type of layout logic into the columns text. Although this make the columns appear ugly, it also shows how the things work and how the stripe margins are respected by the physical columns.
<br/>As you can see now the text wraps again exactly where the stripe (that is, the column background) ends, thus it makes the stripe appear as being the real column and the border as being a real column border.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="example-capt">As you can see, being icreased the width of the whole layout, the left column width also increased accordingly because it was set to <strong>25%</strong>; instead, the right column width remained untouched because it was pixel-fixed at <strong>40px</strong>. Also, as you can easily see, the center column (which is elastic) filled the remaining space and because of the more horizontal space available, its height decreased thus no more being the highest column. In fact now the highest column is the right one, and as you can see, all the backgrounds are of the same height.</p>
<a name="source-code"><h1>The code</h1></a>
<br class="topic-separator" />
<a name="markup"><h2>The markup</h2></a>
<p class="content">I already mentioned in the disadvantages sections, that the markup contains 3-4 <code>div</code>s above the norm (the exact number depends on your usual layout style) and this can be unacceptable by some people. As an <em>extenuation</em> I can say that the number of <code>div</code>s can be (probabily) reduced working around borders and containers needed to reset the positions (also because of borders). Anyway those 3 extra <code>div</code>s are not a big problem to me, for this reason I've not worked a lot to find a way to reduce their quantity.
<br/>This is the (X)HTML markup:
</p>
<pre class="code-view">
<div class="main-box">
<div class="center-box">
<div class="reset-box">
<div class="right-box">
<div class="content-box clearfix">
<div class="left">
</div>
<div class="right">
</div>
<div class="center heightfix">
</div>
</div>
</div>
</div>
</div>
</div>
</pre>
<br class="topic-separator" />
<a name="style"><h2>The style</h2></a>
<p class="content">Below there's the clean and ready-to-use CSS code for a working layout. Although the code can seem tricky, after a careful reading and if you understood the method used (explained in section 2 - The Method) I think it will be trivial to realize what you need to change to have your own layout. That is for example to incrase the width of columns or change the background color and such.
<br/>So, this is the CSS code:
</p>
<pre class="code-view">
div.main-box {
position: relative;
width: 500px;
overflow: hidden;
background: #D0E1E1;
border: solid 1px #993333;
}
div.center-box {
position: relative;
width: 100%;
left: 25%;
background: #FFFFCC;
border-left: solid 1px #993333;
}
div.reset-box {
position: relative;
width: 100%;
left: 100%;
margin-left: -25%;
}
div.right-box {
position: relative;
width: 100%;
margin-left: -40px;
background: #D0EEC0;
border-left: solid 1px #993333;
left: -2px;
}
div.content-box {
position: relative;
width: 100%;
margin-left: -100%;
left: 40px;
}
div.left {
float:left;
width:25%;
}
div.right {
float: right;
width: 40px;
text-align: center;
text-transform: uppercase;
}
div.center {
margin-left: 25%;
margin-right: 40px;
padding-left: 1px;
padding-right: 1px;
}
* html div.center {
height:1%;
margin:0;
}
* html div.left {
margin-right:-3px;
}
* html div.right {
margin-left:-3px;
}
.clearfix:after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.heightfix:before {
content: '.';
display: block;
visibility: hidden;
height: 0;
}
</pre>
<a name="examples"><h1>Examples</h1></a>
<br class="topic-separator" />
<a name="three-empty"><h2>Three columns empty</h2></a>
<p class="content">The next one is a complete example with three columns plus an header and a footer. There are no contents in there, just some <code><br⁄></code> to make the layout grow in height. Widths here are <strong>25%</strong> for the left column and <strong>120px</strong> for the right one, while the whole layout width is 80%.</p>
<table class="examples-code">
<tr class="header">
<td>XHTML Mark-up</td>
</tr>
<tr>
<td>
<pre class="code-view">
<div class="main-box">
<div class="top-box">
<br/>top content<br/><br/>
</div>
<div class="center-box">
<div class="reset-box">
<div class="right-box">
<div class="content-box clearfix">
<div class="left">
<p>l<br/>e<br/>f<br/>t<br/><br/>c<br/>o<br/>l<br/>u<br/>m<br/>n</p>
</div>
<div class="right">
<p>r<br/>i<br/>g<br/>h<br/>t<br/><br/>c<br/>o<br/>l<br/>u<br/>m<br/>n</p>
</div>
<div class="center heightfix">
<p>c<br/>e<br/>n<br/>t<br/>e<br/>r<br/><br/>c<br/>o<br/>n<br/>t<br/>e<br/>n<br/>t</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer-box">
<br/>footer content<br/><br/>
</div>
</div>
</pre>
</td>
</tr>
<tr class="header">
<td>CSS Code</td>
</tr>
<tr>
<td>
<pre class="code-view">
div.main-box {
position:relative;
width:80%;
margin:0 auto;
overflow:hidden;
background:#D0E1E1;
border:solid 1px #993333;
}
div.top-box {
clear:both;
background:#336666;
text-align:center;
text-transform:uppercase;
border-bottom:solid 1px #993333;
}
div.footer-box {
clear:both;
background:#336699;
text-align:center;
text-transform:uppercase;
border-top:solid 1px #993333;
}
div.center-box {
position:relative;
width:100%;
left:25%;
background:#FFFFCC;
border-left:solid 1px #993333;
}
div.reset-box {
position:relative;
width:100%;
left:100%;
margin-left:-25%;
}
div.right-box {
position:relative;
width:100%;
margin-left:-120px;
background:#D0EEC0;
border-left:solid 1px #993333;
left:-2px;
}
div.content-box {
position:relative;
width:100%;
margin-left:-100%;
left:120px;
}
div.left {
float:left;
width:25%;
text-align:center;
text-transform:uppercase;
}
div.right {
float:right;
width:120px;
text-align:center;
text-transform:uppercase;
}
div.center {
margin-left:25%;
margin-right:120px;
padding-left:1px;
padding-right:1px;
text-align:center;
text-transform:uppercase;
}
* html div.center {
height:1%;
margin:0;
}
* html div.left {
margin-right:-3px;
}
* html div.right {
margin-left:-3px;
}
.clearfix:after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.heightfix:before {
content:'.';
display:block;
visibility:hidden;
height:0;
}
</pre>
</td>
</tr>
<tr>
<td class="example-link"><a class="topic-nav" title="Examples - Empty Example" href="RelativelySimple/examples/3col-empty.html" target="_blank">See working example</a></td>
</tr>
</table>
<br class="topic-separator" />
<a name="three-content"><h2>Three columns and content</h2></a>
<p class="content">See next example to have more details/information.</p>
<table class="examples-code" style="width:600px">
<tr class="header">
<td>XHTML Mark-up</td>
</tr>
<tr>
<td>
<pre class="code-view">
<div class="main-box">
<div class="top-box">
top;
</div>
<div class="center-box">
<div class="reset-box">
<div class="right-box">
<div class="content-box clearfix">
<div class="left-col">
left;
</div>
<div class="right-col">
right;
</div>
<div class="center-col heightfix">
center;
</div>
</div>
</div>
</div>
</div>
<div class="bottom-box">
bottom;
</div>
</div>
</pre>
</td>
</tr>
<tr class="header">
<td>CSS Code</td>
</tr>
<tr>
<td>
<pre class="code-view">
div.main-box {
position:relative;
text-align:left;
overflow:hidden;
width:80%;
background:#006699;
}
div.top-box {
background:#0099CC;
}
div.bottom-box {
background:#6699CC;
}
div.center-box {
position:relative;
width:100%;
left:120px;
background:#0066CC;
}
div.reset-box {
position:relative;
width:100%;
left:100%;
margin-left:-120px;
}
div.right-box {
position:relative;
width:100%;
margin-left:-22%;
background:#99CCCC;
}
div.content-box {
position:relative;
width:100%;
margin-left:-100%;
left:22%;
}
div.left-col {
float:left;
width:120px;
}
div.right-col {
float:right;
width:22%;
}
div.center-col {
margin-left:120px;
margin-right:22%;
}
* html div.center-col {
height:1%;
margin:0;
}
* html div.left-col {
margin-right:-3px;
}
* html div.right-col {
margin-left:-3px;
}
.clearfix:after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.heightfix:before {
content:'.';
display:block;
visibility:hidden;
height:0;
}
</pre>
</td>
</tr>
<tr>
<td class="example-link"><a class="topic-nav" title="Examples - Example with Content" href="RelativelySimple/examples/3col-content.html" target="_blank">See working example</a></td>
</tr>
</table>
<br class="topic-separator" />
<a name="three-cnb"><h2>Three columns, content and border</h2></a>
<p class="content">The following is a real-world hypothetical sample layout. I added contents and styles to make it look as a general (ugly?) website would look like. In the next code table I removed real contents and replaced them with placeholders to save space, see at the working example source code if you want to look at the contents too. Also, I removed from the style code all those styles that are not related directly to the three columns layout needs. All the CSS code you'll see in the next table is contained in a ready-to-use CSS file named <code>threecol.css</code> which you can retrive from the links at the bottom of the table itself. This file, as I said, is ready to be used in your own pages and contains also detailed descriptions (in CSS comments) which exaplain what values are meant for what purpose (again), so that you can easily change them to have your own custom layout.</p>
<table class="examples-code" style="width:600px">
<tr class="header">
<td>XHTML Mark-up</td>
</tr>
<tr>
<td>
<pre class="code-view">
<div class="main-box">
<div class="top-box">
top;
</div>
<div class="center-box">
<div class="reset-box">
<div class="right-box">
<div class="content-box clearfix">
<div class="left-col">
left;
</div>
<div class="right-col">
right;
</div>
<div class="center-col heightfix">
center;
</div>
</div>
</div>
</div>
</div>
<div class="bottom-box">
bottom;
</div>
</div>
</pre>
</td>
</tr>
<tr class="header">
<td>CSS Code</td>
</tr>
<tr>
<td>
<pre class="code-view">
div.main-box {
position:relative;
text-align:left;
overflow:hidden;
width:80%;
background:#006699;
border:solid 10px white;
}
div.top-box {
background:#0099CC;
border-bottom:solid 10px white;
}
div.bottom-box {
background:#6699CC;
border-top:solid 10px white;
}
div.center-box {
position:relative;
width:100%;
left:120px;
background:#0066CC;
border-left:solid 10px white;
}
div.reset-box {
position:relative;
width:100%;
left:100%;
margin-left:-120px;
}
div.right-box {
position:relative;
width:100%;
margin-left:-22%;
left:-20px;
background:#99CCCC;
border-left:solid 10px white;
}
div.content-box {
position:relative;
width:100%;
margin-left:-100%;
left:22%;
}
div.left-col {
float:left;
width:120px;
}
div.right-col {
float:right;
width:22%;
}
div.center-col {
margin-left:120px;
margin-right:22%;
padding-left:10px;
padding-right:10px;
}
* html div.center-col {
height:1%;
margin:0;
}
* html div.left-col {
margin-right:-3px;
}
* html div.right-col {
margin-left:-3px;
}
.clearfix:after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.heightfix:before {
content:'.';
display:block;
visibility:hidden;
height:0;
}
</pre>
</td>
</tr>
<tr>
<td class="example-link"><a class="topic-nav" title="Examples - Example with Content and Border" href="RelativelySimple/examples/3col-cnb.html" target="_blank">See working example</a> | <a class="topic-nav" title="3col layout ready to use CSS code file" href="RelativelySimple/examples/threecol.css" target="_blank">See CSS file <code>threecol.css</code></a></td>
</tr>
</table>
<br class="topic-separator" />
<a name="four-cols"><h2>Four columns</h2></a>
<p class="content">In the following example I'll try to use my method to create a layout with 4 columns. Although probabily not so useful (at least not like the 3 cols one) this layout can be handy to learn better how the whole method works.</p>
<table class="examples-code" style="width:600px">
<tr class="header">
<td>XHTML Mark-up</td>
</tr>
<tr>
<td>
<pre class="code-view" style="width:550px;">
<div class="main-box">
<div class="top-box">
<br/>top content<br/><br/>
</div>
<div class="left-box">
<div class="center-box">
<div class="reset-left-box">
<div class="reset-box">
<div class="right-box">
<div class="content-box clearfix">
<div class="left">
<p>l<br/>e<br/>f<br/>t<br/><br/>c<br/>o<br/>l<br/>u<br/>m<br/>n</p>
</div>
<div class="more-left">
<p>m<br/>o<br/>r<br/>e<br/><br/>l<br/>e<br/>f<br/>t<br/><br/>c<br/>o<br/>l<br/>u<br/>m<br/>n</p>
</div>
<div class="right">
<p>r<br/>i<br/>g<br/>h<br/>t<br/><br/>c<br/>o<br/>l<br/>u<br/>m<br/>n</p>
</div>
<div class="center heightfix">
<div class="center-no-left">
<p>c<br/>e<br/>n<br/>t<br/>e<br/>r<br/><br/>c<br/>o<br/>n<br/>t<br/>e<br/>n<br/>t</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-box">
<br/>bottom content<br/><br/>
</div>
</div>
</pre>
</td>
</tr>
<tr class="header">
<td>CSS Code</td>
</tr>
<tr>
<td>
<pre class="code-view">
div.main-box {
position:relative;
width:80%;
margin:0 auto;
overflow:hidden;
background:#D0E1E1;
border:solid 10px #993333;
}
div.top-box {
background:#336666;
text-align:center;
text-transform:uppercase;
border-bottom:solid 10px #993333;
}
div.bottom-box {
background:#336699;
text-align:center;
text-transform:uppercase;
border-top:solid 10px #993333;
}
div.left-box {
position:relative;
width:100%;
left:25%;
background:#FFF0C0;
border-left:solid 10px #993333;
}
div.center-box {
position:relative;
width:100%;
left:100px;
background:#FFFFCC;
border-left:solid 10px #993333;
}
div.reset-left-box {
position:relative;
width:100%;
left:100%;
margin-left:-25%;
}
div.reset-box {
position:relative;
width:100%;
margin-left:-100px;
}
div.right-box {
position:relative;
width:100%;
margin-left:-120px;
background:#D0EEC0;
border-left:solid 10px #993333;
left:-30px;
}
div.content-box {
position:relative;
width:100%;
margin-left:-100%;
left:120px;
}
div.left {
float:left;
width:25%;
text-transform:uppercase;
}
div.more-left {
float:left;
width:100px;
margin-left:10px;
text-transform:uppercase;
}
div.right {
float:right;
width:120px;
text-transform:uppercase;
}
div.center-no-left {
margin-left:100px;
padding-left:10px;
}
div.center {
margin-left:25%;
margin-right:120px;
padding-left:10px;
padding-right:10px;
text-transform:uppercase;
}
* html div.center-no-left {
height:1%;
margin:0;
}
* html div.more-left {
margin-right:-3px;
}
* html div.right {
margin-left:-3px;
}
.clearfix:after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.heightfix:before {
content:'.';
display:block;
visibility:hidden;
height:0;
}
</pre>
</td>
</tr>
<tr>
<td class="example-link"><a class="topic-nav" title="Examples - 4 Columns Example Empty" href="RelativelySimple/examples/4col-empty.html" target="_blank">See working example</a></td>
</tr>
</table>
<br class="topic-separator" />
<a name="five-cols"><h2>Five columns?</h2></a>
<p class="content">This last example is for <em>teaching</em> purposes only. I don't think someone would ever need such a thing.</p>
<table class="examples-code" style="width:600px">
<tr class="header">
<td>XHTML Mark-up</td>
</tr>
<tr>
<td>
<pre class="code-view" style="width:550px;">
<div class="main-box">
<div class="top-box">
<br/>top content<br/><br/>
</div>
<div class="left-box">
<div class="center-box">
<div class="reset-left-box">
<div class="reset-box">
<div class="reset-right-box"
<div class="more-right-box">
<div class="right-box">
<div class="content-box clearfix">
<div class="left">
<p>l<br/>e<br/>f<br/>t<br/><br/>c<br/>o<br/>l<br/>u<br/>m<br/>n</p>
</div>
<div class="more-left">
<p>m<br/>o<br/>r<br/>e<br/><br/>l<br/>e<br/>f<br/>t<br/><br/>c<br/>o<br/>l<br/>u<br/>m<br/>n</p>
</div>
<div class="right">
<p>r<br/>i<br/>g<br/>h<br/>t<br/><br/>c<br/>o<br/>l<br/>u<br/>m<br/>n</p>
</div>
<div class="more-right">
<p>m<br/>o<br/>r<br/>e<br/><br/>r<br/>i<br/>g<br/>h<br/>t<br/><br/>c<br/>o<br/>l<br/>u<br/>m<br/>n</p>
</div>
<div class="center heightfix">
<div class="center-no-left">
<p>c<br/>e<br/>n<br/>t<br/>e<br/>r<br/><br/>c<br/>o<br/>n<br/>t<br/>e<br/>n<br/>t</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-box">
<br/>bottom content<br/><br/>
</div>
</div>
</pre>
</td>
</tr>
<tr class="header">
<td>CSS Code</td>
</tr>
<tr>
<td>
<pre class="code-view">
div.main-box {
position:relative;
width:80%;
margin:0 auto;
overflow:hidden;
background:#B0C1C1;
border:solid 10px #993333;
}
div.top-box {
background:#336666;
text-align:center;
text-transform:uppercase;
border-bottom:solid 10px #993333;
}
div.bottom-box {
background:#336699;
text-align:center;
text-transform:uppercase;
border-top:solid 10px #993333;
}
div.left-box {
position:relative;
width:100%;
left:25%;
background:#D0E1E1;
border-left:solid 10px #993333;
}
div.center-box {
position:relative;
width:100%;
left:100px;
background:#FFFFCC;
border-left:solid 10px #993333;
}
div.reset-left-box {
position:relative;
width:100%;
left:100%;
margin-left:-25%;
}
div.reset-box {
position:relative;
width:100%;
margin-left:-100px;
}
div.reset-right-box {
position:relative;
width:100%;
margin-left:-120px;
left:-100px;
}
div.more-right-box {
position:relative;
width:100%;
background:#D0EEC0;
border-left:solid 10px #993333;
left:-30px;
}
div.right-box {
position:relative;
width:100%;
margin-left:100px;
background:#B0CEA0;
border-left:solid 10px #993333;
left:-10px;
}
div.content-box {
position:relative;
width:100%;
margin-left:-100%;
left:120px;
}
div.left {
float:left;
width:25%;
text-transform:uppercase;
}
div.more-left {
float:left;
width:100px;
margin-left:10px;
text-transform:uppercase;
}
div.right {
float:right;
width:120px;
text-transform:uppercase;
}
div.more-right {
float:right;
width:100px;
text-transform:uppercase;
}
div.center-no-left {
margin-left:100px;
margin-right:100px;
padding-left:10px;
}
div.center {
margin-left:25%;
margin-right:120px;
padding-left:10px;
padding-right:10px;
text-transform:uppercase;
}
* html div.center-no-left {
height:1%;
margin:0;
}
* html div.more-left {
margin-right:-3px;
}
* html div.more-right {
margin-left:-3px;
}
.clearfix:after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.heightfix:before {
content:'.';
display:block;
visibility:hidden;
height:0;
}
</pre>
</td>
</tr>
<tr>
<td class="example-link"><a class="topic-nav" title="Examples - 5 Columns Example Empty" href="RelativelySimple/examples/5col-empty.html" target="_blank">See working example</a></td>
</tr>
</table>
<a name="notes"><h1>Notes</h1></a>
<br class="topic-separator" />
<a name="issues"><h2>Layout issues</h2></a>
<p class="content">As always this solution has problems too. Until now I didn't find any problems apart from those with Netscape Navigator. I found a total of 3 issues with this browser, and solved the first two of them. The third one remains unsolved but I actually think there's a solution to this one too because of the particularity of the issue.</p>
<h4 class="content">The Netscape Problem(s) <i>-- Fixed with NN 9</i></h4>
<p class="content" style="color:gray">As I mentioned above, with <strong>Netscape Browser</strong> (v 8.1.3) used with the option "<em>Display like Firefox</em>" enabled, when the whole layout is lower in height that the display area, the <code>#main-box</code> container will show a 1px of its background on the right. A solution to this is simply put an <code>overflow: scroll</code> for the <code>html</code> tag. You can see this in the <code>style.css</code> file used in all the 3 columns examples.
</p>
<p class="content" style="color:gray">In addition there's another little problem (with Netscape, still, but used with the option "<em>Display like IE</em>") for which I found a solution. The problem comes up when you use <strong>named anchors</strong> inside the <code>#left-box</code>, <code>#center-box</code> or <code>#right-box</code> columns. That is, when you click on the link pointing to the named anchor, the browser jumps back to the clicked anchor. To solve this, simply set a <code>tabindex</code> attribute for the named anchor with the value of <i>0</i> as you can see in the working sample I provided above.
</p>
<p class="content" style="color:gray">The unsolved issue concerns again named anchors. This behavior is a bit similiar to the one of the super-padding, apart from showing up only on Netscape and being less painful. In fact, when you have named anchors in your page, and you click on a link which points to the named anchor it <strong>works</strong> without problems. The problem show up only if you push the refresh button (having the named anchor selected in the url, for example http://somesite.com/somefile.html#mylink). Instead, if you push the GO button near the url, the browser displays the page correctly. I know it's a bit weird, but fortunately it is also ignorable because of its <em>weirdness</em>.
</p>
<p class="content"><strong>Note</strong>: The above issues are grayed because they've been solved with the new version of Netscape Navigator (Version 9.0) so I think now they're not important any more.
</p>
<br class="topic-separator" />
<a name="more-cols"><h2>The more columns than I could</h2></a>
<p class="content">If you really understood my method, it shouldn't be difficult to guess how to add more columns. Although I think none will ever need more than 4 or 5 columns, for which I already provided examples, you could like to try some complex layout with 10 columns (for example) to wonder how flexible the method is or for teaching purposes.</p>
<p class="content">As you should have learnt reading the article, the layout base concept is to relatively shift and unshift (reset) the position. So when you make a change (a movement of a container), you need somewhere a way to reset that change (that is, to cancel the movement). So, theorically speaking, you need two <em>values</em> (<code>margin-left</code> and <code>left</code>) which let you move two different containers (not the same one, otherwise you completely hide the change). One container to add the column, and an additional <em>transparent</em> (one that doesn't cover the layout with its colors) container to adjust the layout positions. In conclusion, if you remove the center, which is not really a column but a filler, the <em>real</em> columns you have require one value for themselfes and another one in some other container to restore the position. In addition you need an additional <em>value</em> to reset the space used by left-borders, which you can put in the last container used and another one for right borders if you have more than 1 right column.</p>
<p class="content">I made a calculation, which is probabily wrong, to obtain the number of containers needed in addition to the usual ones when the layout has more than 3 columns. As I said, I'm sure it's wrong/inexact, but gives a general idea on how many containers you need for a given number of columns: you have to double the total number of <em>real</em> columns (that is, the layout columns less 1, the center) and add 1. For example, for 4-columns layout, you need ((4-1)*2)+1 = 7 containers; for 5-columns layout you need ((5-1)*2)+1 = 9 containers and so on.
</p>
</div>
</div>
<!------------------------------- That's it! --------------------------->
</body>
</html>
Submit an article or tip