Problema con float e clear

Salve, ho un problema con flat e clear.. Ho un menù dove varie div che rappresentano 'tasti' hanno come proprietà float: left; e sono racchiuse in un div chiamato menù. Il problema è che poi ho creato un altro div chiamato content ma si affianca al menù, quindi gli ho messo clear: both ma il problema è che così non vengono rispettate le 'funzioni' margin: 8px auto; e padding.. La pagina con clear:both è questa: http://beateaters.it/news/login.php , senza è questa: http://beateaters.it/news/login_clear.php . Nella prima è come dovrebbe essere il fieldset dove si trova il login, ma c'è quel problema del float, invece nella seconda non c'è il problema del float ma non appare come dovrebbe il fieldset. I codici sono i seguenti:

CSS (può sembrar lungo ma è sempre la stessa 'pappa'):

#m_left, #m_right {
background: url(../images/menu/box_sinistra.gif);
width: 8px;
height: 43px;
float: left;
}

#m_right {
width: 13px;
background: url(../images/menu/box_destra.png);
float: right;
}

#classifiche {
background: url(../images/menu/classifiche1.gif);
width: 121px;
height: 43px;
float: left;
}

#classifiche:hover, #classifiche_tp {
background: url(../images/menu/classifiche2.gif);
width: 121px;
height: 43px;
float: left;
}

#contatti {
background: url(../images/menu/contatti1.gif);
width: 105px;
height: 43px;
float: left;
}

#contatti:hover, #contatti_tp {
background: url(../images/menu/contatti2.gif);
width: 105px;
height: 43px;
float: left;
}

#forum {
background: url(../images/menu/forum1.gif);
width: 70px;
height: 43px;
float: left;
}

#forum:hover, #forum_tp {
background: url(../images/menu/forum2.gif);
width: 70px;
height: 43px;
float: left;
}

#home {
background: url(../images/menu/home1.gif);
width: 72px;
height: 43px;
float: left;
}

#home:hover, #home_tp {
background: url(../images/menu/home2.gif);
width: 72px;
height: 43px;
float: left;
}

#programmi {
background: url(../images/menu/programmi1.gif);
width: 110px;
height: 43px;
float: left;
}

#programmi:hover, #programmi_tp {
background: url(../images/menu/programmi2.gif);
width: 110px;
height: 43px;
float: left;
}

#palinsesto {
background: url(../images/menu/palinsesto1.gif);
width: 110px;
height: 43px;
float: left;
}

#palinsesto:hover, #palinsesto_tp {
background: url(../images/menu/palinsesto2.gif);
width: 110px;
height: 43px;
float: left;
}

#radio {
background: url(../images/menu/radio1.gif);
width: 65px;
height: 43px;
float: left;
}

#radio:hover, #radio_tp {
background: url(../images/menu/radio2.gif);
width: 65px;
height: 43px;
float: left;
}

#diretta {
background: url(../images/menu/diretta1.gif);
width: 290px;
height: 43px;
float: left;
}

#diretta:hover, #diretta_tp {
background: url(../images/menu/diretta2.gif);
width: 290px;
height: 43px;
float: left;
}

#menu {
margin: auto;
text-align: center;
}

#menu a:link, #menu a:visited, #menu a:hover {
color: trasparent;
text-decoration: none;
outline: none;
border: none;
}

HTML:

 <div id="menu">
		<div id="m_left"></div><div id="home_tp"></div><a href="radio.php"><div id="radio"></div></a><a href="programmi.php"><div id="programmi"></div></a><a href="palinsesto.php"><div id="palinsesto"></div></a><a href="classifiche.php"><div id="classifiche"></div></a><a href="forum/"><div id="forum"></div></a><a href="contatti.php"><div id="contatti"></div></a><a href="diretta.php"><div id="diretta"></div></a><div id="m_right"></div>
	</div><br />
	<div id="content">
<fieldset id="log-admin">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
Username<br />
<input type="text" class="i_txt" name="username" /><br /><br />
Password<br />
<input type="password" class="i_txt" name="password" /><br /><br />

[karl94]

È il normale comportamento del float, per ovviare puoi applicare la proprietà clear su un elemento vuoto immediatamente dopo l'elemento che è posizionato mediante float (per esempio quel br, anche se sarebbe meglio un div).
Oppure puoi anche evitare l'aggiunta di un elemento superfluo e applicare all'elemento col float la proprietà overflow con un valore diverso da visible (per esempio hidden).

Quindi settando così:

<div id="menu">
		<div id="m_left"></div><div id="home_tp"></div><a href="radio.php"><div id="radio"></div></a><a href="programmi.php"><div id="programmi"></div></a><a href="palinsesto.php"><div id="palinsesto"></div></a><a href="classifiche.php"><div id="classifiche"></div></a><a href="forum/"><div id="forum"></div></a><a href="contatti.php"><div id="contatti"></div></a><a href="diretta.php"><div id="diretta"></div></a><div id="m_right"></div>
	</div><div style="clear: both;"></div>
	<div id="content">
<fieldset id="log-admin">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
Username<br />
<input type="text" class="i_txt" name="username" /><br /><br />
Password<br />
<input type="password" class="i_txt" name="password" /><br /><br />

Giusto? Hp aggiunto questa parte dopo </div> che chiude il menù:

<div style="clear: both;"></div>

EDIT: Grazie mille, ora si vede correttamente

[karl94]

Dovrebbe essere corretto. L'hai provato?

Un consiglio: nel menù non mettere solo le immagini, scrivi anche un testo nel collegamento, servirà ai motori di ricerca per esempio o anche agli utenti non udenti.
Anzi, la cosa migliore sarebbe non usarle del tutto le immagini, per usare quel particolare font puoi sempre includerlo tramite CSS.