Joomla.it Forum
Joomla! 2.5 (versione con supporto terminato) => Joomla! 1.6/1.7/2.5 => I Template di Joomla 1.6/1.7/2.5 => : Ghinghino 06 Apr 2012, 13:40:07
-
Ciao come da titolo ho un problemino con l'adattare 2 semplici div:
(http://img542.imageshack.us/img542/1430/schemaz.th.jpg) (http://imageshack.us/photo/my-images/542/schemaz.jpg/)
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:
#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:
#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:
#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
-
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;