[html/css] Problema con float

[Gino+89+]

Ciao a tutti, io sto facendo questo sito internet:



Come potete vedere il problema è che il contenuto del div "content" mi va ad occupare la zona dove ci dovrebbe essere la navigazione (il menù, div "navigation"). Infatti il div del menù non si "espande" verso il basso come dovrebbe fare, in modo da non fare uscire i contenuti del div a lato.
Poi se scrivo nel menù (il div "navigation") senza andare a capo mi fa la stessa cosa andando ad accupare il div alla sua destra.

Il codice html è il seguente:

<html>
<head>
<title>Cappelli Gino Home Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="container">
    <div id="header">

    </div>
    <div id="content_color">
    <div id="navigation">
        MENU...
    </div>
    <div id="content">
        Il layout a due colonne con i float presenta un indubbio vantaggio rispetto ad un layout a due colonne con
        posizionamenti assoluti: non impone vincoli sulla lunghezza relativa delle colonne. D' altra parte obbliga, nella
        maggiorparte dei casi, ad avere la navigazione <em>prima</em> dei contenuti, cosa che può avere influenze negative
        su tematiche quali l' accessibilità e il posizionamento sui motori di ricerca.
        Il layout a due colonne si compone di quattro sezioni fondamentali: header, navigazione, contenuti e footer.
    </div>
    <div id="footer">
        COPYRIGHT E INFO DI CHIUSURA PAGINA...
    </div>
    </div>
</div>
</body>
</html>

Questo è il codice del css:

html,body{
          margin: 0;
          padding: 0;
}

body{
     font-family: arial, sans-serif;
     font-size: 76%;
     text-align: center;
     background-color: #3675ff;
}

div#container{
              margin: 0 auto;
              text-align: left;
              width: 1024px;
}

div#content_color{
              background-image: url(../img/contentBackground.jpg);
              width: 904px;
              margin: 0px 55px 0px 61px;
}

div#header{
           height: 170px;
           background-image: url(../img/headerBackground.jpeg);
           width: 1024px;
}

div#navigation{   
            float: left;
            width: 180px;
}

div#content{
            width: 724px;
}

div#footer{
           clear: both;
           width: 904px;
           height: 110px;
           text-align:center;
           background-image: url(../img/footerBackground.jpg);
}

Dove sbaglio?

Grazie mille

[kk3z]

per sfruttare i float devi mettere float:left anche a #content

[Gino+89+]

Grazie mille!
Però adesso è rimasro il problema del menù:


infatti come puoi vedere il testo fuoriesce e "ingombra" il div a lato (una serie di puntini, non va a capo)

Eppure ho specificato la proprietà width, perchè?

[Gino+89+]

Ok risolto...
Non avendo messo degli spazi il testo non poteva andare a capo