Page is a not externally linkable
SuzyUK - 11:48 am on Oct 22, 2010 (gmt 0)
take a look at inline-blocks, you can set up 3 spans or divs - though with divs, or any other block level element (e.g. ul';s) it would need a wee IE hack for versions prior to 8 IIRC.
in short three divs (or any other element that is already in use!) should display side by side if they are give the CSS property display: inline-block; if you then also give them a 33% width you should have 3 equal "columns" in theory ;) - remember with lists the math might be different due to their natural margin/padding!
if using IE < 8 to get a block to accept the inline-block property you need to trip the display property back to "inline" this second rule needs to be seen by lt<8 only and if using a parse hack it still needs to be in a separate ruleset
e.g.
div.ib {display: inline-block;}
div.ib {*display: inline;}
here's an example using lists as the vertical columns.. with both ways of feeding the IE rule (I prefer the conditional ;))
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
table {
width: 100%;
border-collapse: collapse;
border: 0;
table-layout: fixed;
}
td {border: 1px solid #000; padding: 5px; vertical-align: top;}
td ul {
display: inline-block;
vertical-align: top;
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #f00;
width: 32%;
}
td ul {*display: inline;} /* parse hack version, or see conditional below */
</style>
<!--[if lt IE 8]>
<style type="text/css" media="screen">
td ul {
display: inline; /* this is to make inline-block work on block elements versions <IE8 */
margin-right: 3px; /* and this is to simulate the natural 3px spacing that happens between inline-block elements */
}
</style>
<![endif]-->
</head>
<body>
<table summary="" cellspacing="0">
<tr>
<td>one</td>
<td>
<ul><li>one</li><li>two</li><li>three</li></ul>
<ul><li>one</li><li>two</li><li>three</li><li>four</li></ul>
<ul><li>one</li><li>two</li></ul>
</td>
<td>three</td>
</tr>
</table>
</body>
</html>