Back to top

Autore Topic: Problemino con float left che non funziona  (Letto 1880 volte)

Offline Ghinghino

  • Esploratore
  • **
  • Post: 176
    • Mostra profilo
Problemino con float left che non funziona
« il: 06 Apr 2012, 13:40:07 »
Ciao come da titolo ho un problemino con l'adattare 2 semplici div:


In pratica il div LEFT , div CENTER ed il div FOOTER sono contenuti allinterno del div WRAPPER e fin qui tutto nella norma.

Il div left è una semplice colonna con larghezza fissa gestita cosi:

Codice: [Seleziona]
#left {
    background:#00FF00;
    min-height:1000px;
    width:300px;
    margin:0px;
    padding:0px;
    float:left;
   
}

mentre il div Center dovà avere una larghezza che si adatta alla finestra e l'ho gestito cosi:

Codice: [Seleziona]
#center {
    background:#0000FF;
    min-height:1000px;
    min-width:280px;
    width:auto;
    margin:0px;
    padding:0px;
    float:left;
   
}

e per bloccare i 2 div sopra ho fìcreato il div footer gestito cosi:

Citazione
#footer {
    clear:both;
    height:50px;
    width:100%;
    background-color:#0CC;
}

Nel div center ho inserito una posizione dove mi carica il modulo mini k2

il problema nasce quando provo a stringere la finestra, ovvero il div center anzichè rimanere affiancato come dobrebbe al div left e cominciare ad "allungarsi", si sposta sotto il div left e poi si allunga, non si dovrebbe bloccare grazie al ( clear:both;) inserito nel footer?

Vi lascio anche un link provvisorio per visionarlo.



Grazie a tutti
« Ultima modifica: 06 Apr 2012, 20:17:44 da Ghinghino »

Offline Fabrizio Fiorita

  • Abituale
  • ****
  • Post: 1315
  • Sesso: Maschio
    • Mostra profilo
Re:Problemino con float left che non funziona
« Risposta #1 il: 11 Apr 2012, 17:13:22 »
Ciao.
Il clear:both; non ha nessuna influenza sulle div che precedono, comincia ad agire solo con la sua div.
In teoria, avendo tu indicato un'ampiezza fissa per LEFT ed una minima per CENTER, finché la somma dei due (più eventuali margin e padding propri o dell'elemento superiore) è inferiore all'ampiezza dello schermo essi rimangono affiancati; appena superano tale ampiezza CENTER passa sotto a LEFT (FOOTER resta sotto a CENTER).
Se dentro a CENTER poi hai definito altri elementi di ampiezza superiore alla min-width di CENTER sono quelli a stabilire l'ampiezza di CENTER, a meno che non siano definiti con width percentuale.
Prova a togliere il float:left; a CENTER e aggiungi overflow:hidden;
Fabrizio
Per programmare servono i tasti e la testa. Peccato che molti usino solo i primi...
Vai a vedere il mio sito: http://www.fabriziofiorita.joomlafree.it/index.php?option=com_content&view=featured&Itemid=101

 



Web Design Bolzano Kreatif