Salve,
vi metto innanzitutto lo screenshot della mia index:



I box delle rubriche compaiono tutti in verticale uno sotto l'altro. Son due giorni che provo in tutti i modi a posizionarli sempre in verticale ma appaiati; due rubriche per volta: non li voglio così:
[uno]
[due]
[tre]
[ecc.]

ma voglio che si posizionino automaticamente così:

[uno][due]
[tre][alfa]
[beta][delta]

all'interno del box che li contiene "#content".

Questo è il listato della index:
Codice PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="metapolitica,news,misteri,cultura,controinformazione"/>
<meta name="description" content="rivista metapolitica, bimestrale online"/>
<title>il Petardo</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
[url="#"]<div id="header"></div>[/url]
<div id="menu">
<ul id="button">[*][url="#"]home[/url][*][url="#"]info[/url][*][url="#"]disclaimer[/url][/list]
</div>
<div id="conteiner">
<div id="leftbar"></div>
<div id="content">
<div id="lastpost">
<?php
include('blog/func.php');
$query="SELECT*FROM articoli ORDER BY data DESC";
$result=$result=mysql_query($query,$conn->conn);
echo'<table width="500px;" cellspacing="0" cellpadding="0">';
while($assoc=mysql_fetch_assoc($result)){
    echo'<tr><td>[url=""]'.$assoc["autore"].'[/url]</td><td>'.$assoc["data"].'</td></tr>';
    echo'<tr><td colspan=2>[url=""]<h1>'.$assoc["titolo"].'</h1>[/url]</td></tr>';
    echo'<tr><td colspan=2>'.substr($assoc["testo"],0,400).'</td></tr>';
    break;
}
echo'</table>';
?>
</div>
<div id="rubriche">
<?php
$query="SELECT*FROM indice ORDER BY rubriche";
$result=$result=mysql_query($query,$conn->conn);
while($assoc=mysql_fetch_assoc($result)){
    echo'<div id="rubriche">
    <h2>'.$assoc["rubriche"].'</h2>
    </div>';
}
?>
</div>
</div>
<div id="rightbar"></div>
</div>
<div id="clear"></div>
<div id="footer"></div>
</body>
</html>
Questi sono i CSS:
codice:
@charset "utf-8";
/* CSS Document */

@import url("reset.css");
@import url("type.css");

body{
	font:lem Calibri,Verdana,Arial,sans-serif;
	background-color:#666;
}

#header{
	margin:0 auto;
	width:900px;
	height:181px;
	background-image:url("../img/testata.png");
}

#menu{
	margin:0 auto;
	width:900px;
	height:30px;
	background-color:#FFF;
	border-top:dotted;
	border-bottom:dotted;
}

ul#button{
	list-style-type:none;
}

#button li{
	float:left;
	text-align:center;
	color:#fff;
	font-size:1.1em;
	text-decoration:none;
	background-color:#000;
	padding-left:2px;
	height:30px;
	line-height:30px;
	margin-right:1px;
}

#button li a:hover{
	float:left;
	text-align:center;
	color:#000;
	font-size:1.1em;
	text-decoration:none;
	background-color:#999;
	padding-left:2px;
	height:30px;
	line-height:30px;
	margin-right:1px;
}

#conteiner{
	margin:0 auto;
	width:900px;
}

#leftbar{
	float:left;
	width:200px;
	height:500px;
	background-color:#FFF;	
}

#content{
	float:left;
	width:500px;
	background-color:#FFF;
}

#lastpost{
	float:left;
	width:500px;
	height:200px;
}

#rubriche{
	float:left;
	width:250px;
	height:250px;
	background-color:#FFF;
}

#rightbar{
	float:left;
	width:200px;
	height:500px;
	background-color:#FFF;	
}
Ho provato anche modificando i CSS in questo modo, ma il risultato non cambia:
codice:
#leftbar{
	position:absolute;
	margin-left:350px;
	width:200px;
	height:500px;
	background-color:#FFF;	
}

#content{
	position:absolute;
	margin-left:550px;
	width:500px;
	background-color:#FFF;
}

#lastpost{
	position:relative;
	float:left;
	width:500px;
}

#rubriche{
	position:relative;
	float:left;
	width:250px;
	height:250px;
	background-color:#FFF;
}

#rightbar{
	position:absolute;
	margin-left:1050px;
	width:200px;
	height:500px;
	background-color:#FFF;	
}
Qualcuno sa spiegarmi come devo fare? grazie.