Since you want the posts to go three across, drop and start the next three – yeah, you could do this with the regular loop – doing what tIan said up there…float your DIVs. I disagreed with him when he says it would be a nightmare. I haven’t done this with a dynamically generated site, but I’ve done it quite often with static sites. The only difference in them would be the possibility of more divs – but that wouldn’t be a problem.
I’ll post a quick example here, but you’ll have to make adjustments for your current situation. But it should be enough to get you started.
Your HTML should look something like this (using a 2-column layout):
<body>
<div id="wrapper">
<div id="sidebar">
Sidebar stuff here
</div>
<div id="content">
<div class="post<?php whatever the post code is here ?>">
Post 1 here
</div>
<div class="post<?php whatever the post code is here ?>">
Post 2 here
</div>
<div class="post<?php whatever the post code is here ?>">
Post 3 here
</div>
<hr class="clear" />
</div> <!--closing #content -->
<hr class="clear" />
</div> <!-- closing #wrapper -->
</body>
Then your CSS should be something along the lines of this:
* {margin:0; padding:0;border:none;}
#wrapper {width:700px;}
#sidebar {width:200px; float:left;}
#content {width:500px; float:right;}
#content div {float:left; width:165px;}
hr.clear {clear:both; visibility:hidden;}
Now, basically, that’ll make the divs inside the content area float left. Each are 165px, added together *almost*makes 500px. in addition, you need to clear that float each time there’s a “row” of posts, so the next line can start.
The problem with this, of course, is Internet Explorer. You *will* need conditional comments to adjust for margins and padding. And if you have a word or a link that is longer than the given 165px, IE *will* expand the div in question, and cause the last div (post #3) to drop. So you’ll need to be careful about images sizes, word and URL lengths.
But it should work just fine. Hope it gets you started.
