problema con un float:left

[blur]

ciao,

sto cercando di adattare ad una pagina uno slideshow immagini ma ho un problema con un float.

la situazione:

<div id="page>
<div id="thumbs" class="navigation">
<div class="caption">


testo</p>
</div>
</div>
</div>

div#page è il contenitore principale
div#thumbs con la classe "navigation" contiene le thumbs allineate nel contenitore tramite float:left
il div caption contiene il testo descrittivo dell'immagine

Il problema è che il float:left della classe "navigation" impedisce al contenitore "caption" di rimanere dentro al contenitore principale "page" e quindi sfora.

Gli attributi di navigation sono inseriti in una classe javascript in fondo alla pagina:

// We only want these styles applied when javascript is enabled
 $('div.navigation').css({'width' : '300px', 'float' : 'left'}); 
$('div.content').css('display', 'block');

ho provato a mettere un clearfix <div style="height:0;clear:both;"></div> prima della chiusura di ogni contenitore, ma non funziona...

idee??

[Prill]

ciao, probabilmente hai fatto il clear non nella giusta posizione, però è impossibile dirti di più senza vedere la pagina

[blur]

ciao prill,
grazie per la risposta.

non riuscendo a venirne fuori, ho risolto in un altro modo.
nel JS che controllava il float , l'ho sostituito con un position:absolute; top: 530px
non so se è una finezza o no, ma l'ho testato con i vari browser e funziona.
solo con una cosa non andava: il top con IE 7 non si visualizza allo stesso modo che con gli altri FF, Chrome e IE9.
Quindi sono ricorso all'hack

<!--[if lte IE 7]> <script type='text/javascript' src='js/slideshow_ie.js'></script>
 <![endif]-->

e ora va tutto bene

[blur]

rettifico


il position non era absolute ma relative e comunque non funziona per IE 7

[Prill]

se puoi lascia un link alla pagina così vediamo

[blur]

ok ho messo online la bozza

ho ripristinato la versione originale con il float:left. lo trovi nei 2 file slideshow.js e slideshow_ie.js nelle prime righe.

ho lasciato inoltre i border a 1px colorati nei div interessati, così vedi meglio.

grazie

[Prill]

Non è un problema di float, i clear ci sono e vanno bene, è il caption che sfora, poiché le dimensioni del testo superano l'altezza impostata, prova ad assegnargli un centinaio di pixel o quanti ne servono per il testo più lungo (e alto) e il div page si estenderà a inglobarlo

[blur]

Originariamente inviato da Prill
è il caption che sfora, poiché le dimensioni del testo superano l'altezza impostata

scusa ma dov'è che hai visto un'altezza impostata?

[Prill]

Dovrebbe essere

div.caption-box {
	position: relative;
	clear: left;
	height: 75px;
}

(il line-height, ereditato, è di 22px )

[blur]

il css di questo slideshow mi sembra un pò contorto.

ok per tagliare la testa al toro, imposto un'altezza maggiore al div.caption-box anche se non mi piace tanto l'idea di dover limitare il numero di righe di descrizione. L'ideale sarebbe stato che il box si estendesse in base al numero di righe rimanendo sempre dentro al div#page....

ok grazie mille prill