[html/css] Problema con float

Gino+89+ · 02-07-2008, 21:06

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:

Codice:

<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:

Codice:

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 · 02-07-2008, 23:25

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

Gino+89+ · 02-07-2008, 23:50

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+ · 02-07-2008, 23:56

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

02-07-2008, 23:25	#2
kk3z Senior Member Iscritto dal: Nov 2003 Messaggi: 980	per sfruttare i float devi mettere float:left anche a #content

02-07-2008, 23:50	#3
Gino+89+ Member Iscritto dal: Nov 2005 Città: Mantova Messaggi: 115	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è?

02-07-2008, 23:56	#4
Gino+89+ Member Iscritto dal: Nov 2005 Città: Mantova Messaggi: 115	Ok risolto... Non avendo messo degli spazi il testo non poteva andare a capo

Strumenti
Mostra una versione stampabile Invia questa pagina per email