Problema posizione foot

**joey90** · 03-04-2013, 19:45

Ciao, vi scrivo qui perchè mi sto scervellando per risolvere questo problema ( le sto provando praticamente tutte! )

Il problema è che il foot della pagina non è giù come dovrebbe essere, ma continua a stare dopo l'ultimo elemento, come nell'immagine.

Il codice è pressappoco questo:

codice:

[...css...]
#column1 {
  float: left;
  width: 50%;
  min-height: 100%;
  height: auto;
 }

#column2 {
 float: left; width: 49%;
 min-height: 100%;
 height: auto;
}
 
[...html...]
<div style="width: 100%;">
 <div id="column1">1</div>
 <div id="column2">2<div>
</div>
<div id="foot">foot</div>
[...]

O almeno...è il sunto

Grazie per l'attenzione, buona serata

**Prill** · 03-04-2013, 19:52

devi interrompere il float, facendo un clear

**joey90** · 03-04-2013, 19:53

Ho provato ma niente...

**Prill** · 03-04-2013, 20:58

sbagli qualcosa
puoi seguire questo esempio: http://css.maxdesign.com.au/floatuto...torial0816.htm

**mahamatt** · 04-04-2013, 20:10

Codice PHP:


#foot { clear:both }

comunque puoi togliere il float:left al div#column2, non è necessario!

**deleted_129** · 05-04-2013, 19:31

Se proprio no ci riesci puoi usare un metodo un pò grezzo, cioe' mettere un margin-top quanto quello spazio cosi' il footer va direttamente sotto...(o aumentare la width cosi' non entra + dentro il contenitore principale e va a capo)...ma ti consiglio di trovare un modo + 'tecnico' come eliminare il float , usare il clear e tutto quello che dicevano prill e mahamatt...

**pascalman** · 05-04-2013, 19:53

Inserisci i due div column1 e column2 in un altro div e imposta l'overflow di quest'ultimo su hidden .

Funziona sempre :-)

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Untitled Document</title>
		<style>
			#column1 {
				float: left;
				width: 50%;
				min-height: 100%;
				height: auto;
			}
		
			#column2 {
				float: left; width: 49%;
				min-height: 100%;
				height: auto;
			}
			
			#sezione {
				overflow: hidden;
			}
		
		</style>
	</head>
	
	<body>
		<div>
			logo
		</div>
		
		<div id="sezione">
			<div id="column1">
				

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
				

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
				

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
			</div>
			<div id="column2">
				Contenuto column 2
			</div>
		</div>
		
		<div id="logo">
			footer
		</div>
		
	</body>
</html>

Discussione: Problema posizione foot

Strumenti discussione

Ricerca discussione

Visualizza

Problema posizione foot

Permessi di invio