Voglio realizzare un layout con header, due colonne (content, menu) e footer. Il comportamento che vorrei è che content e menu riempissero la pagina nel caso in cui il contenuto non fosse sufficiente a riempierla. Nel caso in cui il contenuto fosse molto allora devono lasciare che si allunghi.
Questo layout con le tabelle lo facevo in 2 minuti, adesso però voglio fare tutto tableless anche se devo impazzire all'inizio.
Ho fatto questo seguendo qualche consiglio trovato su internet:
codice:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>Preview</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="container"> <div id="header">header</div> <div id="menu">menu menu</div> <div id="content" style="border:1px solid red;"> contento contenuto cotenuto .... </div> <div id="footer">Footer</div> </div> </body></html>Però, dopo che ho aggiunto il menù, quest'ultimo non si allunga al 100% come fa il content.codice:html,body { margin:0; padding:0; height:100%; /* needed for container min-height */ background:gray; font-family:verdana; text-align:center; } div#container { position:relative; /* needed for footer positioning*/ margin:0 auto; /* center, not in IE5 */ width:950px; background:#f0f0f0; height:auto !important; /* real browsers */ height:100%; /* IE6: treaded as min-height*/ min-height:100%; /* real browsers */ } div#header { border-bottom:1px solid black; } div#footer { position:absolute; width:100%; bottom:0; /* stick to bottom */ background:#ddd; border-top:1px solid gray; clear:both; } div#content{ } div#menu{ float:right; width:250px; border-left:1px solid black; min-height:100%; /* non si estende*/ height:100%; /* non si estende*/ background-color:teal; }
Come posso risolvere??
GRAZIE 100%
Rispondi quotando
