Div: contenitore non prende altezza contenuto

**fenderum** · 26-10-2011, 12:22

Salve a tutti, ho un problema nel posizionamento dei <div> all'interno della pagina.

In pratica non capisco perché nonostante il <div> "menu" sia contenuto in "head", quest'ultimo si comporti ignorando l'area occupata da "menu"; mentre ho bisogno che "head" si estenda per tutta l'altezza di "menu" ( non vorrei dare un'altezza fissa ad "head" ).
Di conseguenza anche "content" e "footer" si trovano in poisizioni sbagliate.

Qui 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">
	<head>
		<title>Title</title>		
		<link rel="stylesheet" href="cssn.css" type="text/css" />
	</head>

	<body>
		<div id="main">
			<div id="head">
				<div id="menu">
					<ul>
						[*]aaaaaaaaaa
						[*]bbbbbbbbbb
						[*]cccccccccc
						[*]dddddddddd
					[/list]
				</div>
				
				<div id="title">
					TITOLO
				</div>
			</div>
			
			<div id="content">
				cnsancasoin
			</div>
			
			<div id="footer">
				fsdnocabscoas
			</div>
		</div>
	</body>
</html>

e CSS

codice:

*{margin: 0;
	padding: 0;}
div
{color: white;}
a
{text-decoration:none;}
ul
{text-decoration: none;}
ul li
{
	list-style: none;
	text-align: right;
}
#main
{
	position: relative;
	top: 100px;
	width: 850px;
	margin-left: auto;
	margin-right: auto;
	background-color: black;
	display: block;
	/*height: 600px;*/
}
#head
{
	background-color: yellow;
}
#menu
{
	position: relative;
	top: 60px;
	margin-right: 50px;
	float: right;
}
#title
{
	position:relative;
	top: 30px;
	margin-left: 40px;
	float: left;
}
#content
{
	clear:both;
	background-color: blue;
}
#footer
{
	background-color: green;
}

Ho letto che si può rsolvere con "height: auto;" su "head", ma non funziona.
Perché "head" ha altezza 0 ? Come faccio a dargli l'altezza del suo contenuto ?

Grazie in anticipo

PS: scusate se il codice è lungo, ma al momento non ho lo spazio per renderlo visibile.

**marty89** · 26-10-2011, 13:29

Ciao, se vuoi ottenere quell'effetto devi togliere "position: relative" al div menu, in questo modo anche se aggiungi delle voci al menu, il div head si adatta all'altezza. Se vuoi invece posizionarlo in modo relativo, allora devi dare un'altezza fissa all'head e posizionare dove preferisci il menu.

**fenderum** · 26-10-2011, 15:13

Ah, grazie

. Credo di aver capito perché finisce lì...
Non esiste un modo per fargli capire a che posizione finisce il suo contenuto "visivamente" ?
Non riesco a pensare ad un modo alternativo per fare la stessa cosa ... anche perché senza usare "position:relative;" non ho idea di come posizionare poi il menu a destra.
Ho notato però che anche togliendo il "position:relative;" da "menu" non si vede comunque lo sfondo giallo di "head" ... come mai ? Forse per il "float:right;" su "menu" ?

**ResianTaxidrive** · 26-10-2011, 15:21

secondo me devi assegnare anche a head un float in modo che si metta sullo stesso "livello" di menu

**fenderum** · 26-10-2011, 15:55

Grazie per la risposta

, mettendo un "float" ed un "width:100%;" posso finalmente vedere lo sfondo giallo dell' "head".
Rimarrebbe solo come fargli vedere l'altezza "reale" di "menu"... c'è un modo per farlo ? O sono costretto ad utilizzare una dimensione fissa per "head" ?

**ResianTaxidrive** · 26-10-2011, 16:18

in che senso "l'altezza reale"? oltre al menu dentro l'head c'è anche un titolo. Lo si vede nel posto da te desiderato?

**fenderum** · 26-10-2011, 21:22

Originariamente inviato da ResianTaxidrive
in che senso "l'altezza reale"? oltre al menu dentro l'head c'è anche un titolo. Lo si vede nel posto da te desiderato?

Sì il titolo viene visualizzato correttamente.
Un'immagine spiega sicuramente meglio: http://oi39.tinypic.com/16ixxrq.jpg.
In pratica vorrei che il <div> "head" finisse dove finisce "menu" , cioè alle linee bianche invece che sulla riga nera.

**ResianTaxidrive** · 26-10-2011, 22:11

hai poi tolto il position: relative?

**fenderum** · 27-10-2011, 09:29

No, perché non so in che altro modo spostare il menu in basso se non con "position: relative;" . Esiste forse un altro modo per spostarlo in basso ?

**ldetomi** · 27-10-2011, 09:30

perdona, non ho avuto il tempo di provare il tuo codice o analizzarlo in profondità ma vorrei fare cmq 2 commenti:
1) Appena letto di eliminare il position:relative anche io ho pensato che fosse la soluzione perché so che i posizionamenti tolgono l'oggetto dal flusso del documento e quindi il suo contenitore non sa più dove finisce il suo contenuto.
Poi però ci ho pensato meglio e mi è sorto il dubbio che questo sia assolutamente vero per il position:absolute ma per il relative non dovrebbe esserci questo problema (chiedo conferma di questo)

2) In secondo luogo invece, credo che il tuo problema sia veramente sul float, perché quando lo usi nasce il problema di "contenere i floats", su Html.it c'è un articolo di 3-4 anni fa in proposito, con 3 soluzioni proposte, una delle quali (se ricordo bene) era quello di usare overflow:auto; sul contenitore.....

Discussione: Div: contenitore non prende altezza contenuto

Strumenti discussione

Ricerca discussione

Visualizza

Div: contenitore non prende altezza contenuto

Permessi di invio