Footer che va sotto il menu

[xcs]

Ciao,
ho un layout a 3 colonne con header e footer:

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

<div id="container">

  <div id="leftnav">
    <div id="menu">Menu1</div>
    <div id="menu">Menu2</div>
    ...
  </div>

  <div id="content">Contenuto</div>

  <div id="rightnav">Altro</div>

</div>

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

questo è il css:

#header {
	width: 760px;
	height: 50px;
	margin: 0 auto 10px;
}

#container {
	width: 760px;
	margin: 0 auto;
	position: relative;
}

#leftnav {
	position: absolute;
	top: 0;
	left: 0;
	width: 130px;
	float: left;
}

#content {
	padding: 0 10px;
	width: 462px;
	margin-left: 130px;
	margin-right: 150px;
	float: none;
}

#rightnav {
	position: absolute;
	top: 0;
	right: 0;
	width: 150px;
	float: right;
}

#footer {
	width: 760px;
	padding: 0;
	margin: 0 auto;
}

Il problema è che quando l'altezza del contenuto è inferiore a quella delle colonne il menu si sovrappone al footer.

Si può risolvere? Grazie.

[teazzo]

Prova a mettere clear:both al footer o clear:right al container.

Potrebbe anche essere utile dare una larghezza (anche 100%) al footer

[xcs]

Originariamente inviato da teazzo
Prova a mettere clear:both al footer o clear:right al container.

Potrebbe anche essere utile dare una larghezza (anche 100%) al footer

Ho provato, ma niente di niente...non cambia neanche di un millimetro

[jesus]

Originariamente inviato da xcs

Il problema è che quando l'altezza del contenuto è inferiore a quella delle colonne il menu si sovrappone al footer.

Si può risolvere? Grazie.

Purtroppo è un problema che si presenta quando si utilizzano i div in posizione assoluta.
Devi fare in modo che la colonna centrale sia sempre più alta.
Una soluzione potrebbe essere quella di mettere un padding-bottom abbastanza alto:

#content {
  padding: 0 10px 200px 10px;
  width: 462px;
  margin-left: 130px;
  margin-right: 150px;
  float: none;
}

oppure dargli un altezza minima:

#content {
  padding: 0 10px;
  width: 462px;
  margin-left: 130px;
  margin-right: 150px;
  float: none;
  min-height: 500px;
  height: auto !important; /* hack per IE */
  height: 500px;           /* hack per IE */
}

[xcs]

Originariamente inviato da jesus
Purtroppo è un problema che si presenta quando si utilizzano i div in posizione assoluta.
Devi fare in modo che la colonna centrale sia sempre più alta.
Una soluzione potrebbe essere quella di mettere un padding-bottom abbastanza alto:

#content {
  padding: 0 10px 200px 10px;
  width: 462px;
  margin-left: 130px;
  margin-right: 150px;
  float: none;
}

oppure dargli un altezza minima:

#content {
  padding: 0 10px;
  width: 462px;
  margin-left: 130px;
  margin-right: 150px;
  float: none;
  min-height: 500px;
  height: auto !important; /* hack per IE */
  height: 500px;           /* hack per IE */
}

Soluzione già provata ma nisba...forse sarebbe il caso di togliere la posizione assoluta, ma non ho idea di come si possa realizzare la stessa cosa senza position:absolute...

[xcs]

Grazie, ho risolto con float...

[jesus]

Originariamente inviato da xcs
Grazie, ho risolto con float...

Anche il metodo del min-height che ti ho suggerito unito alla posizione assoluta funziona. L'unico problema è che tu specificavi sia la posizione assoluta che il float.

Se ti interessa ho creato un esempio di layout con posizione assoluta e position assoluta:

http://k.1asphost.com/leonfer/layout.asp

[xcs]

Originariamente inviato da jesus
Anche il metodo del min-height che ti ho suggerito unito alla posizione assoluta funziona. L'unico problema è che tu specificavi sia la posizione assoluta che il float.

Se ti interessa ho creato un esempio di layout con posizione assoluta e position assoluta:

http://k.1asphost.com/leonfer/layout.asp

Lo so che con il min-height funziona, il problema stava poi nel fatto che venivano creati spazi vuoti antiestetici, perchè in alcune pagine il contenuto è più lungo del menu e in altre vice versa.
Ho risolto in questo modo:

#header {
	width: 760px;
	height: 50px;
	margin: 0 auto 10px;
}

#container {
	width: 762px;
	margin: 0;
	padding: 0;
}

#leftnav {
	width: 130px;
	float: left;
	margin-right: 10px;
}

#content {
	padding: 0;
	width: 462px;
	float: left;
}

#rightnav {
	width: 150px;
	float: left;
	margin-left: 10px;
}

#footer {
	width: 750px;
	padding: 5px;
	margin: 10px auto 0;
}

Potrebbe essere d'aiuto anche ad altri, qualunque sia l'altezza delle 3 colonne il layout rimane perfetto.
Ciao e Grazie

[tricoci]

Questa pagina con firefox non va, il contenuto va oltre il footer...