Tag: clear
Easy Clear #4, ovvero “e mò basta però”
dopo la terza puntata di easy clear mi sono accorto che non sempre funziona su ie6.
dramma e panico.
non vi preoccupate ho la soluzione:
la 3 prevedeva di mettere nel contenitore dei float il seguente codice
CSS:
-
#wrapper {
-
overflow:hidden;
-
height:1%;
-
height:auto !important;
-
}
se non funziona su ie6 provate questo.
CSS:
-
#wrapper {
-
overflow:hidden;
-
width:100%;
-
}
any feedback?
Easy Clear #3, ovvero di come non si smette mai di imparare
Dopo la soluzione di ieri, impietrito da uno strano effetto proposto randomicamente da ie7 per cui compariva un margin bottom all'elemento esterno in float, sono andato in cerca di metodi alternativi.
Semplice quanto sconvolgente (mai ci avrei pensato): mettere un bel
CSS:
-
#wrapper {
-
overflow:hidden;
-
height:1%;
-
height:auto !important;
-
}
senza float, al contrario di ieri, nè dimensioni fisse
il wrapper a questo punto miracolosamente si prenderà l'altezza giusta.
Easy Clear #2, ovvero di come non sapere le cose porta a complicarsi la vita
dopo l'articolo di ieri sull'easy clear di Position Everything ecco un metodo molto più semplice proposto da ordered list:
L'unico rischio è se si ha una struttura complessa e con molti elementi in float: potrebbe creare un po' di confusione e instabilità .
vedi anche easy clear #3
Easy Clear, ovvero di come non inserire elementi inutili nel codice XHTML
Spesso capita di trovarsi con dei layout con elementi in float senza nulla su cui applicare un clear...
ad esempio:
CSS:
-
#left, #right {
-
float:left;
-
}
ora, poniamo che abbiate necessità di inserire un background di qualsiasi tipo al wrapper.
l'elemento non terrà conto dell'altezza degli elementi in float.
quindi o si imposta un'altezza fissa (perdendo, di fatto, l'adattabilità al contenuto) o inserite un elemento con un clear:left (o both)...
spesso si usano elementi br (o, arrgghh, dei div vuoti) con classe clear così definita
CSS:
-
.clear {
-
clear:both;
-
line-height:0;
-
height:0;
-
}
volendo è una soluzione funzionale.
introduce però un elemento inutile nel codice della pagina.
che non è un gran problema in sè...
però è poco elegante ;-)
ci viene incontro il creatore dell'one true layout (metodo che personalmente non mi entusiasma per la complicatezza del tutto e per il numero di hack necessari)
ma sta di fatto che in questo è geniale:
basta applicare all'elemento wrapper la classe clearAfter così definita
CSS:
-
.clearAfter:after {
-
content: '-';
-
display: block;
-
height: 0;
-
line-height:0;
-
font-size:1px;
-
clear: both;
-
visibility: hidden;
-
}
-
-
.clearAfter {
-
display: inline-block;
-
}
-
/* \ */
-
-
.clearAfter {
-
display: block;
-
}
vedi anche easy clear #2 e easy clear #3
