div altezza dinamica

[sportfantasy]

Salve a tutti,

sono praticamente un neofita dei fogli di stile... ho letto diverse guide ma continuo ad avere dei dubbi...

Ho un piccolo problema che vorrei risolvere... Vi spiego con un esempio:

Html della pagina:

<div id="container">

	<div id="item">
		[img]img.gif[/img]
    	Testo
    </div>

	<div id="item">
	    [img]img.gif[/img]
    	Testo
    </div>
    
    <div id="item">
		[img]img.gif[/img]
    	Testo    
    </div>

	<div id="item">
	    [img]img.gif[/img]
    	Testo
    </div>
</div>

Foglio di stile:

div#container
{
	width:500px;
	margin:10px;
	border:dotted;
}

div#container > div#item
{
	width:220px;
	height:50px;
	border:1px;
	float:left;
	margin:10px;
}

div#container > div#item img
{
	width:50px;
	height:50px;
}

Le domande sono le seguenti:
1) Vorrei che l'altezza del div container si adattasse al contenuto... ma così non avviene... cosa sbaglio?
2) la sintassi div#container > div#item img è corretta? Voglio che le proprietà siano applicate solo alle img contenute nel div item solo all'interno del div container!

Grazie a tutti

Luca

[mucu]

1) i div si adattano di default, se ti sembra che non succede dipenderà dall'uso improprio di float e position
2) la sintassi è sbagliata perchè gli id devo essere unici, quindi basterebbe #item img per identificare qualsiasi immagine che si trovi in un contenitore chiamato item
essendo che devono essere univoci non lo puoi usare più volte, dovresti usare una classe

[sportfantasy]

Originariamente inviato da mucu
1) i div si adattano di default, se ti sembra che non succede dipenderà dall'uso improprio di float e position
2) la sintassi è sbagliata perchè gli id devo essere unici, quindi basterebbe #item img per identificare qualsiasi immagine che si trovi in un contenitore chiamato item
essendo che devono essere univoci non lo puoi usare più volte, dovresti usare una classe

Prima di tutto, grazie per aver risposto...

Ho modificato il css così:

div#container
{
	width:500px;
	height :50px;
	margin:10px;
	border:dotted;
}

.item
{
	width:220px;
	height:50px;
	border:1px;
	border-style:solid;
	float:left;
	margin:10px;
}

.item img
{
	width:50px;
	height:50px;
}

Gli item all'interno del container sono stati inseriti così:

<div class="item">
	[img]img.gif[/img]
	Testo
</div>

Il problema dell'altezza del div però persiste... me ne accordo dal bordo del container padre!

Sai come posso risolvere?

[mucu]

metti a container

overflow: auto

ovviamente non tutti i browsers reagiscono in maniera omogenea e magari dovrai inseriere del codice diverso, puoi cercare informazioni sul clearing del float

metti a item

overflow: hidden

per impedire che il contenitore del testo si ingrandisca se il font cambia
item potrebbe essere benissimo un

o un[*] invece che un <div>, ma non so il contesto e quindi se questo ti incasina troppo sorvola

il border viene indicato in 2 casi in maniera sbagliata, la sintassi dovrebbe essere di questo tipo

border: 10px solid #00ff002