PDA

View Full Version : [XHTML] Problemi di layout

bouncey2k
22-03-2007, 13:39
Ho costruito un layout del seguente tipo:

<div id="header"></div>

<div id="container">
<div id="colonna-sinistra"></div>
<div id="colonna-centro"></div>
<div id="colonna-destra"></div>
</div>

<div id="footer"></div>

C'è un problema però. Se la colonna destra è più corta della colonna sinistra, il footer si sovrappone alle colonne e non sta a fondo pagina dove dovrebbe stare. Come si può risolvere ciò? Grazie.
andbin
22-03-2007, 13:58
Come si può risolvere ciò?Vedi in <questo> (http://www.hwupgrade.it/forum/showthread.php?t=1371536) thread.
bouncey2k
22-03-2007, 15:24
ho inserito un

<div style="clear:both;"></div>

prima del footer, ma non funziona.
andbin
22-03-2007, 15:42
ho inserito un

<div style="clear:both;"></div>

prima del footer, ma non funziona.Data questa pagina:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Prova</title>
<style type="text/css">
<!--
#content { width: 400px; border: 3px solid green; }
#content_l { float: left; border: 1px solid red; }
#content_r { float: right; border: 1px solid blue; }
#footer { width: 400px; border: 1px solid orange; }
-->
</style>
</head>
<body>

<div id="content">
<div id="content_l">
DIV sinistro<br><br><br><br><br><br><br>
</div>
<div id="content_r">
DIV destro<br><br><br><br>
</div>

<div style="clear: both"></div>
</div>

<div id="footer">
Other block
</div>

</body>
</html>Visualizzala, poi prendi il <div style="clear: both"></div> e mettilo fuori dal div #content, prima del div #footer e .... vedi che succede. ;)
bouncey2k
22-03-2007, 16:13
Non mi funziona..
probabilmente perché nel css ho messo che:

#colonna-sx {
position: absolute;
top: 0;
left: 0;
width: 18%;
padding: 0;
}

#colonna_centro {
margin: 0 19% 0 19%;
border: 1px solid gray;
padding: 0;
}
#colonna-dx {
position: absolute;
top: 0;
right: 0;
width: 18%;
padding: 0;
}

se uso il float però mi si incasinano le colonne di centro e di destra perché non stanno più al pari della colonna di sinistra ma sono più spostate in basso.
bouncey2k
23-03-2007, 12:54
up
andbin
23-03-2007, 13:11
Non mi funziona..Ho capito ... non hai usato la proprietà float e quindi il clear:both non serve.

Tu vuoi realizzare un layout a 3 colonne completamente "liquido". Leggi <qui> (http://css-discuss.incutio.com/?page=ThreeColumnLayouts), <qui> (http://www.saila.com/usage/layouts/) e <qui> (http://www.glish.com/css/2.asp) (ma trovi sicuramente molto altro se fai una ricerca più accurata della mia ;) ).
bouncey2k
24-03-2007, 11:37
grazie, ho risolto :)