Div affiancati ma il resto non va a capo

simbian

Div affiancati ma il resto non va a capo

Salve, ho come da oggetto due div affiancati, più un'altra parte che non c'entra niente fa parte di un altro div non contenitore

digitalking.it/fxmypics

Vorrei che il terzo blocco andasse sotto, come mai viene affiancato pur non facente parte del contenitore?
Inoltre la cosa si verifica solo con Firefox, con Chrome e IE viene visualizzato come vorrei.

Il codice HTML è questo:

        <div id="slider">
        <div class="box1">contenuto 1</div>
        <div class="box2">contenuto 2</div>
        </div>

    <div id="main-wrap">
        <div id="main">Your passion, our work...

e il CSS:

 
#slider {
    width: 960px;
    margin: 0 auto;
    clear: both;
    border:1px solid red;
}
  .box1 {
width: 490px;
border:2px solid black;
float:left; 
}
  .box2 {
width: 460px;
border:2px solid black;
float:left;
}

grazie per l'eventuale aiuto

marcof 0

Prova a mettere nel css dentro a #slider il comando:

display:block;

Fammi sapere come va !!

simbian

ciao MarcoF, ho provato ma così è peggio, nel senso che il contenuto del secondo div poi mi va sotto al primo

simbian

senza sbattermi troppo ho risolto mettendo ```
<br clear="all"/>

marcof 0

A posto allora !!

simbian

si a parte il fatto di avere uno spazio in più sotto. E' che non capisco come mai Chrome e Firefox lo visualizzano in modo diverso visto che hanno comportamenti di rendering molto simili, posso capire tra Firefox e IE...
E poi se nel contenitore è impostato il clear: both; non dovrebbe far visualizzare gli elementi che sono posti prima e dopo.

marcof 0

Io in Firefox e Chrome visualizzo il sito nello stesso modo !!! Penso di avere l'ultima versione di entrambi, forse è per questo !!!

Comunque, nel caso non te ne sia già reso conto, il problema sussisteva perchè i due div box1 e box2, essendo flottanti, non facevano andare il div main-wrap a capo (è come se Firefox non considerasse il div slider o considerasse flottante anch'esso, mentre IE considera, come secondo me è giusto che sia, il div slider e lo considera come elemento blocco); ti dico questo perchè infatti se rendevi non flottante uno dei div box (compromettendo ovviamente la loro visualizzazione) il main wrap andava a capo.

Per questo motivo, forse, mettendo display: inline; a tutti i div puoi ottenere una visualizzazione senza spazio anche in IE, in quanto è come se portassi IE a visualizzare la pagina come Firefox.

Spero di essermi spiegato bene