tre div allineati e resi float

[cybergiaggia]

ciao a tutti,
ho affiancato tre div inserendoli in una class con proprietà float:left:
http://digilander.libero.it/cybergiaggia/index.html

al div celeste e a quello orange ho poi assegnato la proprietà clear:right che in IE mi permette di ridurre le dimensioni della pagina senza che i blocchi vadano a capo...

in firefox però il giochino nn funziona...

sapete dirmi il perchè o darmi una soluione alternativa?
mi date qlche dritta?

grazie

[cybergiaggia]

[cybergiaggia]

[Mich_]

Non riesco a capire la domanda.
Nella tua pagina io (FF 1.5 sotto linux) vedo quattro strisce verticali, affiancate, tutte lunghe uguale (giallo azzurro, arancio, verde).
Sono distanti un certo spazio bianco dal bordo superiore,

Ci sono problemi nel layout (il codice CSS non e` molto pulito, e fa utilizzo di posizionam. assoluti, che io ritengo poco pratici e non accessibili).

[cybergiaggia]

grazie Mich_ per il reply...

il mio prob è questo:
il blocco arancio con FF se ne va a capo se riduco la finestra del browser...
succede anche a te?

in pratica il layout sarebbe una striscia orizzontale di 400px di altezza; i primi tre blocchi dovrebbero ospitare i contenuti, il blocco verde farebbe da sfondo e darebbe continuità alla striscia...

cosa intendi per css poco pulito? mi dai qlche dritta?

grazie,

[Mich_]

html, body {
  margin:0px;
  padding:0px;
  width: 100%;    /* in alternativa a definire una larghezza fissa */
}

body {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size: 100%; /* il 10px; e` troppo piccolo e molti browser lo sovrascrivono */
  min-width: 650px;
}

#back {
  width:100%;
  height:400px;
  background-color:#CCC;
}

#container {
  /* margin: 0 auto;  /* non ha senso se usi width: 100% */
  width:100%;  
  height: 400px;
  /* text-align:center;  /* idem come sopra */
  background-color:#0F0;
}

#left {
  width:150px;
  height: 100%;
  background-color:#FF0;
  float:left;
}

#center {
  width: 150px;
  height: 100%;
  background-color: #9CF;
  float:left;
}

#main {
  width:350px;
  height: 100%;
  background-color:#F60;
  float:left;
}

Prova cosi`. Poi se ci sono problemi (o non e` quello che intendevi) ci risentiamo.

[cybergiaggia]

grazie ancora...

c'erano effettivamente alcune cose senza senso...

però adesso il blocco arancio mi va a capo in IE (prova a ridurre la larghezza della finestra a meno di 650px)...

la cosa si supera se metto 'clear:right;' ai div 'center' e 'main'...

a questo punto sarebbe tutto perfetto se non fosse che i blocchi sono tutti allineati in basso, invece li vorrei a metà pagina (per questo avevo messo il posizionamento assoluto a 140px)...

:master:

[Mich_]

Puoi mettere un <div> che sposti tutto in basso, tipo un #sopra, che sia alto quanto vuoi (ad esempio 140 px) e largo 100%. Puoi metterlo al posto del tuo #back, che non ha piu` senso
#top {
width: 100%;
height: 140px;
}
Se il container e` float (per ovviare al bug di FF), deve essere float anche il #sopra.

[cybergiaggia]

ok grazie,
qui c'è il risultato...

ora cosa dovrei fare per rendere liquido il blocco arancio anche su FF?
se lo imposto con width:100%, o se ometto di indicarne la larghezza, mi va a capo in FF...

[Mich_]

Ho visto.
Non capisco i due blocchi #container e .modular, che hanno lo stesso posto nella logica della pagina. In realta` il .modular lo puoi eliminare.

Riguardo all'ultima domanda, a me non succede che va a capo.
In FF 1.5 sotto linux, se la pagina si stringe, viene visualizzata la barra di scorrimento orizz. e per vedere tutto l'arancio occorre scorrere la pagina. Ma e` l'effetto del min-width.

Non mi piacciono i tuoi JS, che sono di stampo vecchio (potrebbero non funzionare in qualche brwoser moderno, magari in qualche versione non ancora pubblicata). Ma questo e` un problema diverso, che risolverai chiedendo nel forum JS.