div height che si adatta automaticamente

**Davide80** · 29-05-2006, 12:23

Ciao a tutti, vorrei sapere il metodo per adattare automaticamente un div, nel mio caso il <div id="container"> al footer, così da far allungare anche il colore di background, o eventuali immagini di fondo.

Ho notato che se metto un

allora l'height si adatta, ma qualora volessi inserire un immagine float right o left, l'height si adatta solo al tag

e l'img è come se non ci fosse.

questa è la pagina

questo è il codice css

codice:

html,body{
	margin: 0;
	padding:0
}
body{
	font-family: verdana;
	font-size: 76%;
	text-align: center
}
#content{
	width: 760px;
	margin: 0 auto;
	text-align: left;
}
#head{
	background-color: #8B0000;
	height: 50px;
}
#topmenu{
	background-color: Black;
	color: #fff;
	padding: 10px 10px 10px 10px;
	margin: 0 0 0 0;
	position:relative;
	text-align: right;
}
#mainmenu{
	float:left;
	background-color: #8B0000;
	width: 160px;
}
#container{
	background-color: Fuchsia;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}
#footer{
	background-color: Black;
	color: #fff;
	padding: 10px 10px 10px 10px;
	margin: 0 0 0 0;
	clear: left;
}
p{
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}





#topmenu ul{
	list-style:none;
	padding: 0 0 20px;
	margin: 0;
}
#topmenu li a{
	color: #fff;
}
#topmenu li a:hover{
	color: Yellow;
}
#topmenu li{
	display: inline;
	padding: 5px 5px 5px 5px;
	margin: 0;
}

#mainmenu ul{
	list-style:none;
	padding: 20px 0 20px 20px;
	margin: 0;
}
#mainmenu li{
	display: block;
	padding: 5px;
	margin: 0;
}
#mainmenu li a{
	color: #fff;
}

Questo è il codice HTML

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" xml:lang="en" lang="en">
<head>
	<title>OstiabyNight.it</title>
	<link rel="stylesheet" href="webstyle.css" type="text/css" />
</head>

<body>
	<div id="content">
		<div id="head"></div>
		<div id="topmenu">
			<ul>
				[*]Top Chart
				[*]Hot
				[*]Locali	
				[*]Radio
				[*]Ricerca
			[/list]
		</div>
		<div id="mainmenu">
			<ul>
				[*]Iscriviti
				[*]Servizi
				[*]Cocktails
				[*]Download
				[*]Forum
				[*]Contatti
			[/list]
		</div>
		<div id="container">
			

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

footer</p>
		</div>
	</div>
</body>
</html>

**thomas_anderson** · 29-05-2006, 16:35

Quando usi il float l'elemento flottato viene rimosso dal flusso del documento, anche se gli altri elementi lo vedono e lo circondano. una soluzione è quella di impostare una height per il footer in modo da contenere l'immagine. in altre parole, oltre alla width devi anche dichiarare un height.

**Davide80** · 29-05-2006, 16:38

si ma nel content, non sò quanto sarà alto, per questo cercavo un modo per creare un'altezza automatica.

Il mio content ci dovranno essere dati dinamici, quindi l'altezza è un'incognita.

**thomas_anderson** · 29-05-2006, 16:42

Il massimo che puoi ottenere con i CSS è dare un'altezza in percentuale (o comunque con misure relative). questo ti dà un certo margine sui contenuti. di più i CSS non possono fare.

**Davide80** · 29-05-2006, 17:09

Discussione: div height che si adatta automaticamente

Strumenti discussione

Ricerca discussione

Visualizza

div height che si adatta automaticamente

Permessi di invio