La propietat clear. Una problemàtica (II)
Publicat el 29/11/2004
El bug del que parlava a La propietat clear. Una problematica
ha quedat resolt amb el Firefox 1.0.
Això vol dir que s'ha d'anar amb compte quan es vol aconseguir una estructura del tipus de la figura 1.
Utilitzant un CSS tal com:
div#A {
float: left;
width: 200px;
}
div#B {
margin-left: 205px;
width: 500px;
}
div#C {
float: left;
width: 200px;
}
div#E {
clear: left;
}
Apareix un problema a l'hora de solucionar la relació "C"-"D"-"E" ja que el clear: left de "D" afectarà tant al float de "C" com al d'"A" aconseguint com a resultat quelcom semblant a la figura 2.
L'espai marcat en color és degut al clear que neteja el float "A".
Una solució és convertir la caixa "B" en flotant quedant el CSS tal com:
div#A {
float: left;
width: 200px;
}
div#B {
float: left;
width: 500px;
}
div#C {
float: left;
width: 200px;
}
div#E {
clear: left;
}
Per una estructura líquida aquesta solució no és la més adequada pel problema d'haver de definir l'amplada de "B" (al ser flotant haurà de tenir una amplada definida).
Comentaris