Perchè ogni volta che creo un nuovo sito si presenta inesorabilmente lo stesso problema? E ogni volta in qualche modo riesco a risolverlo SENZA SAPERE COME O QUALE SIA DAVVERO LA CAUSA?
Stavolta però non ci riesco, sto schiumando. E anche se ci riuscissi, voglio davvero capire cosa c'è di sbagliato e perchè non va.
Se qualcuno sa spiegarmi l'enigma vi ringrazio
Ho una semplice costruzione di pagina che prevede i seguenti div:
che vorrei venisse visualizzata come nella foto in allegato [esempio 1]codice:<div id="container"> <div id="header"></div> <div id="menu"></div> <div id="wrapper"> <div id="lato_sx">_sx</div> <div id="content"></div> </div> <div id="footer"></div> </div>
il codice dello stile è il seguente:
codice:#container { width:770px; margin:0px auto; background-color:#FF9900;} #header { width:770px; height:177px; background-color:#FF0000;} #menu { background-color:#750B0C; height:30px; width:770px;} #wrapper { background-color:#FFFF33; border:solid 1px #000000;} #lato_sx { width:205px;background-color:#FFCC99; margin:0px 5px 15px 0px; float:left;} #content { width:540px; float:left; padding:5px; background-color:#FFCCFF;} #footer { background-color:#333333; margin:15px 0px 0px 0px; height:30px; text-align:center; font-size:8pt; color:#666666; padding:0px 0px 15px 0px; clear:left;}
mi piacerebbe tanto capire perché se metto il float: left al #lato_sx il #wrapper decide chiudersi subito sopra il #lato_sx e il #content riducendosi ad altezza 0px -.-
io invece vorrei che, com'è dovrebbe fare dato che le chiusure dei div sono giuste, si chiudesse SOTTO al #lato_sx e il #content come in allegato [esempio 2].
cos'è che sbaglio??
CODICE DELL'INTERA PAGINA:
codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Documento senza titolo</title> <style type="text/css"> <!-- #container { width:770px; margin:0px auto; background-color:#FF9900;} #header { width:770px; height:177px; background-color:#FF0000;} #menu { background-color:#750B0C; height:30px; width:770px;} #wrapper { background-color:#FFFF33; border:solid 1px #000000; height:150px;} #lato_sx { width:205px;background-color:#FFCC99; margin:0px 5px 15px 0px; float:left;} #content { width:540px; float:left; padding:5px; background-color:#FFCCFF;} #footer { background-color:#333333; margin:15px 0px 0px 0px; height:30px; text-align:center; font-size:8pt; color:#666666; padding:0px 0px 15px 0px; clear:left;} --> </style> </head> <body> <div id="container"> <div id="header">header</div> <div id="menu">menu</div> <div id="wrapper">wrapper <div id="lato_sx">lato_sx</div> <div id="content">content</div> </div> <div id="footer">footer</div> </div> </body> </html>
Rispondi quotando