[XHTML] Problemi di layout

[bouncey2k]

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]

Originariamente inviato da bouncey2k

Come si può risolvere ciò?

Vedi in <questo> thread.

[bouncey2k]

ho inserito un

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

prima del footer, ma non funziona.

[andbin]

Originariamente inviato da bouncey2k

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]

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]

up

[andbin]

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]

grazie, ho risolto