From tables to Unordered lists.

[windows]

Okay, here's something a bit different.

I know you can use float:left; or float:right; when you have TWO divs or lis... but what about 4?

<!-- w --><a class="postlink" href="http://www.Furnation.com/Mister_Initial_Man/Library/library-head.html">www.Furnation.com/Mister_Initial_Man/Li ... -head.html</a><!-- w -->

<table style="border: 1px solid #000088" cellspacing="0" cellpadding="2" align=center>
<tr>
<td width=150 style="border: 1px solid #000088">
<div class="navigation"><a href=http://www.webdeveloper.com/forum/archive/index.php/"library-main.html#pandas" target="library-main">Pandas</a></div></td>
<td width=150 style="border: 1px solid #000088">
<div class="navigation"><a href=http://www.webdeveloper.com/forum/archive/index.php/"library-main.html#novelettes" target="library-main">Novellettes</a></div></td>
<td width=150 style="border: 1px solid #000088">
<div class="navigation"><a href=http://www.webdeveloper.com/forum/archive/index.php/"library-main.html#shorts" target="library-main">Short Stories</a></div></td>
<td width=150 style="border: 1px solid #000088">
<div class="navigation"><a href=http://www.webdeveloper.com/forum/archive/index.php/"library-main.html#essays" target="library-main">Essays</a></div></td>
</tr>
<tr>
<td colspan=2 style="border: 1px solid #000088">
<div class="navigation"><a href=http://www.webdeveloper.com/forum/archive/index.php/"warning.html" target="warn">Adult</a></div>
<td colspan=2 style="border: 1px solid #000088">
<div class="navigation"><a href=http://www.webdeveloper.com/forum/archive/index.php/"/Mister_Initial_Man/index2.html" target="_top">Main</a></div>
</tr>
</table>

------------------------------
UPDATE:

I tried doing some coding myself, and it all went kinda kablooey when I changed from HTML 4.0 Transitional to XHTML 1.0 Strict. The sad results can be seen here. (<!-- m --><a class="postlink" href="http://www.furnation.com/Mister_Initial_Man/New_Site/Library/header.html">http://www.furnation.com/Mister_Initial ... eader.html</a><!-- m -->)

I have to code this site in XHTML because of further layout mayhem I'm going to inflict.Use float:left on each div across the screen and then use clear:both on the div that you want started below them.

for an example see:http://www.maxdesign.com.au/presentation/liquid/example10.htmThe HTML:

<div id="headlinks" class="navigation">
<ul id="leftlist">
<li class="top left nav"><a href=http://www.webdeveloper.com/forum/archive/index.php/"library-main.html#pandas">Pandas</a></li>

<li class="top nav"><a href=http://www.webdeveloper.com/forum/archive/index.php/"library-main.html#novelettes">Novellettes</a></li>

<li class="bottom nav"><a href=http://www.webdeveloper.com/forum/archive/index.php/"warning.html">Adult</a></li>
</ul>
<ul id="rightlist">
<li class="top left nav"><a href=http://www.webdeveloper.com/forum/archive/index.php/"library-main.html#shorts">Short Stories</a></li>

<li class="top nav"><a href=http://www.webdeveloper.com/forum/archive/index.php/"library-main.html#essays">Essays</a></li>

<li class="bottom nav"><a href=http://www.webdeveloper.com/forum/archive/index.php/"../index2.html">Main</a></li>
</ul>
</div>

The relevant CSS:

#headlinks{
width:601px;
margin: 0 auto;
height: 60px;
}
#leftlist{
width:300px;
float:left;
}
#rightlist{
width:300px;
}
li.nav{
border: 1px solid #333388;
padding: 5px;
height:43px;
}
li.top{
width:150px;
}
li.bottom{
width:300px;
clear: both;
}
li.left{
float:left;
}