Hi,
There is no way (at present) to distribute data over 2 columns automatically (although css3 has some column routines that will do this - but is not supported enough to have any use at present).
If you want to divide the lists manually then you can simply float them as columns. If you want an image in the middle then that can be floated also (or it could be a background image).
Here's the simplest example.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#outer{
width:982px;
border:1px solid #000;
margin:auto;
overflow:hidden
}
.column1,.column2,.column3{
width:250px;
float:left;
background:#ffffcc
}
.column3{float:right;}
.column2{
width:405px;
margin:0 0 0 38px
}
p.image{
width:405px;
height:305px;
background:red;
}
</style>
</head>
<body>
<div id="outer">
<div class="column1">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
<div class="column2">
<p class="image">image</p>
</div>
<div class="column3">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</div>
</body>
</html>
Hope it helps 
Bookmarks