Dva sloupce v CSS a divná mezera

Trochu jsem očistil návštěvní knihu svého webu od tabulek a rozdělení do příspěvků dvou sloupců jsem udělal v CSS. Vše funguje dobře, až na první příspěvek, kde je hrozně velka mezera před textem. Vizte screen. http://www.cth-clan.ic.cz/chyba.jpg . Nevíte někdo čím to je?

EDIT: po odstranění prvního resetu se mezera přesune na spodní část prvního postu. V IE sloupce vůbec nejsou vedle sebe ale pod sebou, mezera se tam nevyskytuje.

<div class="item">

        	<div class="itemhead">

		<h3 class="itemdate">#<? echo $entryCounter; ?></h3>

		<h2 class="itemtitle"><a class="nodec" href="#e<? echo $postId; ?>"><? echo $postDate; ?></a></h2>

	</div>

				

	<div class="reseter"></div>

				

	<div style="width:20%;float:left;border:1px dashed red">

		<dl>

    			<dt><strong>Autor</strong></dt>

    			<dd class="ip">IP: 0.0.0.0</dd>

    			<dd class="ip">Email</dd>

    		</dl>

	</div>

				

	<div style="width:80%;padding-left:20%;border:1px dashed red">

		Tady je text

	</div>



	<div class="reseter"></div>

</div>

.reseter {

	FLOAT: none;

	CLEAR: both;

}



DIV.item DIV.itemhead {

	HEIGHT: 24px;

	BACKGROUND: url(../images/title-empty.gif) repeat-x;

	BORDER-BOTTOM: 1px solid #6e6e6e;

}



DIV.item .itemdate {

	FLOAT: right;

}

Jediné co je zcela evidentní (ozkoušeno), že tu mezeru dělá resetovač. Problém je v tom, že pokud tam resetovač není a text příspěvku je příliš krátký (jednořádkový), tak se výška celého boxíku přizpůsobí výšce textu příspěvku (pravý sloupec), a popisky, které jsou nalevo tak "vyčuhují" z boxíku :(

Tak jsem to trochu upravil. Nyní v IE funguje výborně, avšak Firefox a Opera stále velká mezera pod textem prvního příspěvku. Všechny ostatní už jsou vysoké normálně.

Screen (Opera): [url=http://www.cth-clan.ic.cz/chyba2.JPG
]http://www.cth-clan.ic.cz/chyba2.JPG
[/url]

<div class="item">

	<div class="itemhead">

		<h3 class="itemdate">#<? echo $entryCounter; ?></h3>

		<h2 class="itemtitle"><a class="nodec" href="#e<? echo $postId; ?>"><? echo $postDate; ?></a></h2>

	</div>

				

	<div style="width:20%;float:left;">

		<dl>

    			<dt><strong>Autor</strong></dt>

    			<dd class="ip">IP: 0.0.0.0</dd>

    			<dd class="ip">Email Web</dd>

    		</dl>	

	</div>		

				

	<div style="padding-left:20%">

		Text příspěvku

	</div>

				

	<hr class="cleaner" />

				

</div>



hr.cleaner {

	clear:both;

	height:1px;

	margin: -1px 0 0 0; padding:0;

	border:none;

	visibility: hidden;

}

DIV.item DIV.itemhead {

	HEIGHT: 24px;

	BACKGROUND: url(../images/title-empty.gif) repeat-x;

	BORDER-BOTTOM: 1px solid #6e6e6e;

}



DIV.item .itemdate {

	FLOAT: right;

}

habendorf
Bohužel nepomáhá :'(

Je pravda, že menu jsou obě taky floatované, ale nemůže to být náhoda?

EDIT: Kecám, koukal jsem na levé menu :X

Koukám koukám. Tak co navrhuješ?

Hmm, je to ale prdel ladit to beztabulkově :D. Bohužel tím přijdu o dosavadní jednoduchost středního sloupce. Doteď mu stačilo padding 175px na obě strany a byl klid. Takže ohledně tohohle řešení pár otázeček.

1) Jsi jistý, že to zabere (nerad bych to celý rozházel :))
2) Jaký konkrétní float (tipuji na left)

Tak jsem to upravil (ještě mrknu na tvé řešení), ale zase jsem narazil. Střední sloupec se vykreslí až pod pravým, takže ještě trochu doladit pozici v HTML kódu ;-)

EDIT: V kódu 1. levý, 2. střední, 3. pravý sloupec. Všechny mají float: left, ale pravý sloupec zkončí úplně pod prostředním sloupcem, ale nalevo (kde je levé menu).

EDIT2: odvolávám co jsem odvolal. Jen sem tam nechal moc velký padding :X, takže teď už jen správný padding a mohlo by to běhat ;-)

Tak dík moc, už to funguje :)