Site
Management
Index
Contributed by Christian Heilmann
Print 
Email
Multi column displays in CSS
A lot of designs we have to turn into HTML these days have multi column elements. These are created because either the copy text might get too long to be readable in a fully expanded browser or the designer wants to ensure that as many as possible page elements are "above the fold".
Although both reasons are worthy to be discussed, we have to live with these tasks.
Normally these problems can be easily solved with an HTML table, and if you can use them and you have to ensure that also older browsers need to display the columns, do so.
With accessible web sites though, you need to make sure that you don't nest tables, and that is where CSS column displays become a necessity.
The only problem is that to date, all multi column layouts in CSS are a hack only, as CSS was not meant to cater for these.
CSS3 comes with a working draft1 for multi column layouts, but until browsers will support these, HTML itself might be obsolete.
So when using any of these techniques below, please be aware of the following:
- Do not add any padding, margin or border attributes to the column elements. (IE does not like that). Add these attributes to embedded elements.
- Make sure to test your sites in as many browsers as possible, and also at different font sizes (these examples here were tested on IE6, Opera 7, Netscape 7 and Mozilla Firebird 0.6)
- It is NOT possible to create a layout where all columns are the same height and width unless you fix those (and IE sometimes has problems with percentages).
- Use a doctype that enforces standards compliant rendering.
Example one - Absolute positioning
#inline1{
border:1px solid black;
position:relative;
background:#ccf;
height:2em;
}
.absembed {
width:25%;
position:absolute;
}
#embed2{
top:0px;
left:25%;
background:#fcc;
}
#embed3{
top:0px;
left:50%;
background:#ffc;
}
#embed4{
top:0px;
right:0px;
background:#cff;
}
<div id="inline1">
<div id="embed1" class="absembed">embed1</div>
<div id="embed2" class="absembed">embed2</div>
<div id="embed3" class="absembed">embed3</div>
<div id="embed4" class="absembed">embed4</div>
</div>
Pro
- Understands width properly
Contra
- Parent element does not expand with the height of the child elements, it needs to be set.
- Elements do cover each other when the content is too big for the percentage of the screen.
Example two - Floating
#inline2{
float:none;
clear:both;
background:#ccf;
}
.clear{
height:1px;
font-size:1px;
float:none;
clear:both;
}
.embed{
width:25%;
float:left;
}
<div id="inline2">
<div class="embed" style="background:#cff">embed1</div>
<div class="embed" style="background:#ffc">embed2</div>
<div class="embed" style="background:#fcf">embed2</div>
<div class="embed" style="background:#fcc">embed2</div>
<div class="clear"> </div>
</div>
Pro
- Elements are pushed under each other, should they be too wide for the screen space.
- Reuse of one class for all elements (if they have the same width)
- Parent element height increases with the height of the highest element.
Contra
- Width property might not be understood by IE5 on a Macintosh
- Needs an extra element to clear the floats (for IE only).
Example three - Mixed Absolute Positioning
#inline3{
background:#ccf;
position:relative;
}
#embed5{
width:25%;
position:absolute;
top:0px;
right:75%;
background:#ccc;
}
#embed6{
position:relative;
margin:0 50% 0 25%;
background:#fcc;
}
#embed7{
width:25%;
position:absolute;
top:0px;
right:25%;
background:#ffc;
}
#embed8{
width:25%;
position:absolute;
top:0px;
right:0px;
background:#cff;
}
<div id="inline3">
<div id="embed5">embed5</div>
<div id="embed6">embed6 embed6 embed6 embed6 embed6 embed6
embed6 embed6 embed6 embed6 </div>
<div id="embed7">embed7</div>
<div id="embed8">embed8</div>
</div>
Pro
- Parent element height increases with the height of the highest element.
Contra
- Needs to know which element is the highest.
Links
- 1CSS 3 multi column working draft: http://www.w3.org/TR/2001/WD-css3-multicol-20010118/
Christian Heilmann
http://icant.co.uk