margini e altezze [era:Codice HTML non funziona!]

**lordams** · 28-08-2012, 14:52

Salve, è da un po' che sto impazzendo e non riesco a capire perché questo codice non funziona come vorrei; ecco il codice HTML:

codice:

<!DOCTYPE html>
<html><head><title>$titolo</title><link rel="stylesheet" type="text/css" href="stile.css" /></head><body>
<div id="titolo">
<div id="logo">logo</div>
<div id="pub1">pub1</div>
</div>
</body></html>

E qui il CSS:

codice:

body {
background: #ff00ff;
}

#titolo {
width: 900px;
height: 100%;
margin: 0px auto;
}

#logo {
background: #ff0000;
width: 150px;
height: 90px;
float: left;
}

#pub1 {
background: #ff0000;
width: 728px;
height: 90px;
float: right;
}

Utilizzando la funzione "Ispeziona elemento" di Chrome o di Firefox, vedo che il tag body non contiene tutto il codice che dovrebbe contenere; infatti, ha un'altezza di 0px! Così anche il div titolo... Inoltre i due div logo e pub1 non sono "attaccati" al margine superiore dello schermo, è come se ci fosse un margin-top che in realtà non c'è!
Il fatto è che tutto ciò accade solo se collego al file html il file css... senza il css funziona tutto perfettamente! Che devo fare??

**Prill** · 28-08-2012, 16:43

Se vuoi che il div titolo abbia altezza pari al 100%, dovrai specificare un'altezza del 100% anche per html e body; per far sì che il div sia attaccato al bordo superiore occorrerà azzerare i margini su body.
Poi, in generale, in presenza di elementi flottanti, per far sì che un contenitore si allunghi a contenerli, bisogna ripristinare il normale flusso della pagina interrompendo il float dopo di essi (con la proprietà clear)

**lordams** · 28-08-2012, 22:23

Anzitutto grazie per la risposta;
ma io nel body non ho settato nessun margin, quindi di default non dovrebbe essere 0px?
Un'ultima cosa: la proprietà clear a cosa la devo applicare?

**Vincent.Zeno** · 28-08-2012, 22:27

corretto il titolo (la prossima volta dai un titolo autodescrittivo del problema, grazie)
sposto in css

**Prill** · 28-08-2012, 22:31

i margini di default sono di qualche pixel, del resto basta un box colorato e una semplice prova per verificarlo.
il clear va inserito dopo i div flottanti. Se ne è parlato tante volte qui nel forum, puoi fare una ricerca al suo interno. Anche in questo caso puoi renderti conto creando un primo div con sfondo colorato e inserendo al suo interno un div con float, e successivamente aggiungendo un div su cui sia impostato un clear:both per vedere come la visualizzazione cambia

**lordams** · 31-08-2012, 14:19

Ok, grazie per le risposte e scusate per l'errore nel titolo

Discussione: margini e altezze [era:Codice HTML non funziona!]

Strumenti discussione

Ricerca discussione

Visualizza

Codice HTML non funziona!

Permessi di invio