Ciao a tutti,
nel realizzare un layout a 3 colonne con i css, mi sono accorto che la colonna di destra si posiziona si a destra, ma sotto le altre due colonne, come potete vedere dal file allegato. Non so se il problema dipenda da un'utilizzo errato del float, ad ogni modo l'anomalia si verifica sia su EI6 che su MF1.07 . Riporto qui di seguito il codice xhtml e quello css.
Ecco il file xhtml
Questo è il file csscodice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Modello di pagina xhtml a tre colonne</title> <link href="layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="testata">l'header, o testata </div> <div id="menu"> menu superiore</div> <div id="corpo"> <div id="colonna_sinistra">la colonna di sinistra</div> <div id="colonna_centrale">la colonna centrale, dove inserire i contenuti</div> <div id="colonna_destra">la colonna di destra</div> </div> <div id="footer"> il footer, o pie di pagina </div> </body> </html>
Vi ringrazio in anticipo per l'eventuale aiutocodice:body { font:80% verdana,helvetica,sans-serif; margin:0; padding:0 } body { text-align:center; } #testata { width: 750px; height: 50px; background-color:#ff0000; border:1px solid #000000; } #menu { width: 750px; height: 20px; background-color:#e5634c; border:1px solid #000000; } #corpo { width: 750px; height: 200px; border:1px solid #000000; text-align:left } #colonna_sinistra { float: left; width: 150px; height: 200px; border:1px solid #000000; background-color:#666666; } #colonna_centrale { width: 450px; height: 200px; border: 1px solid #000000; background-color:#66cc66; } #colonna_destra { float: right; width: 140px; height: 200px; border:1px solid #000000; background-color:#336699; } #footer { width: 750px; height: 50px; border:1px solid #000000; background-color:#ccff00; }
§Tristan§
Rispondi quotando
