Layout capriccioso

s1mon3

Layout capriccioso

Salve a tutti, sono un neofita che lentamente si sta avvicinando al mondo del webdesign, sto tutt'ora progettando un sito internet e sto creando un layout con float a tre colonne, nel creare il layout riscontro diversi "capricci" da parte del codice, in pratica su IE6 si vede correttamente cosi come in IE7...e stranamente FF mi da problemi, mi nascone lo sfondo del div#contenitore, sicuramente son errori miei...e che purtroppo non riesco ad individuare, spero che voi possiate aiutarmi nel mentre vi ringrazio.
Simone

CSS

body {
margin: 0;
background: url(../grafica/bg.png) #0054A6 repeat-x;
font-family: Verdana, Sans-serif;
font-size: 0.750em;
color: #ffffff;
}

div#header {
width: 700px;
height: 125px;
margin: 0 auto;
background: url(../grafica/header.png);
}

div#contenitore {
width: 700px;
height: 100%;
margin: 0 auto;
background: url(../grafica/sfondo.png);
}

div#left {
width: 150px;
float: left;
}

div#right {
width: 150px;
float: right;
}

div#center {
width: 400px;
float: left;
}

div#footer {
width: 700px;
height: 30px;
margin: 0 auto;
background: url(../grafica/footer.png);
clear: both;
}
```XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "h ttp://ww w.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="h ttp://ww w.w3.org/1999/xhtml" lang="it">
<head>
<title>Layout</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<body>
<div id="header"></div>
<div id="contenitore">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
<div id="footer"></div>
</body>
</html>

jess

Succede perché nel contenitore hai tutti elementi con float e nessuna altezza specificato. Puoi risolvere in due modi:

Specificare un'altezza per il <div> contenitore
Inserire un <div class="clear"> invisibile in fondo al <div id="contenitore> subito prima del tag di chiusura.

</div>
<div class="clear"></div>
</div>

Il css per il div clear è:

.clear {
clear: both;
height: 0;
}Per ovviare a eventuali problemi con non mi ricordo più quale browser in genere si aggiunge anche una dimensione per il font e poi un lineheight 0 per evitare che viene visualizzato un piccolo spazio, che renderebbe il div non più invisibile. Il css diventa:
.clear {
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}

s1mon3

Ti ringrazio, mi hai letteralmente salvato la vita...non sapevo di questa cosa del clear div invisibile...non si smette mai di imparare
Grazie!