[XHTML] Problemi di layout

bouncey2k · 22-03-2007, 14: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, 14:58

Quote:

Originariamente inviato da bouncey2k

Come si può risolvere ciò?

Vedi in <questo> thread.

bouncey2k · 22-03-2007, 16:24

ho inserito un

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

prima del footer, ma non funziona.

andbin · 22-03-2007, 16:42

Quote:

Originariamente inviato da bouncey2k

ho inserito un

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

prima del footer, ma non funziona.

Data questa pagina:

Codice:

<!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, 17: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, 13:54

up

andbin · 23-03-2007, 14:11

Quote:

Originariamente inviato da bouncey2k

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>, <qui> e <qui> (ma trovi sicuramente molto altro se fai una ricerca più accurata della mia

).

bouncey2k · 24-03-2007, 12:37

grazie, ho risolto

22-03-2007, 14:39	#1
bouncey2k Member Iscritto dal: Jan 2006 Messaggi: 271	[XHTML] Problemi di layout 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.

22-03-2007, 16:24	#3
bouncey2k Member Iscritto dal: Jan 2006 Messaggi: 271	ho inserito un <div style="clear:both;"></div> prima del footer, ma non funziona.

22-03-2007, 17:13	#5
bouncey2k Member Iscritto dal: Jan 2006 Messaggi: 271	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.

23-03-2007, 13:54	#6
bouncey2k Member Iscritto dal: Jan 2006 Messaggi: 271	up

24-03-2007, 12:37	#8
bouncey2k Member Iscritto dal: Jan 2006 Messaggi: 271	grazie, ho risolto

Strumenti
Mostra una versione stampabile Invia questa pagina per email