[CSS] Astuce <div class="clr"> sur le float

Marsh Posté le 27-03-2005 à 17:52:27

Bonjour,

Cette astuce (<div class="clr"></div> ) permet au conteneur (parent) ayant plusieur conteneurs (enfants) avec des definitions "float" de s'agrandir en fonction de la hauteur des conteneurs enfants. Le probleme c'est que sous IE 6 il affiche ce div (class=clr) avec une certaine epaisseur quelque soit la margin/padding/height... que je donne a ce div (class=clr).

Je suis ouvert a toutes solutions que vous pourrez me proposer.

Merci d'avance, Janeiro

HTML Simplifie :

<div id="maincontainer">
<div id="lefcol">content</div>
<div id="rightcol">menu container</div>
<div class="clr"></div>
</div>

CSS :
#MainContainer {width: 100%;}
#leftcol {float: left;}
#rightcol {float: right;}
.clr {clear: both; height: 0px; margin: 0px; padding: 0px;}

Message édité par janeiro le 27-03-2005 à 17:54:04

Reply

Marsh Posté le 27-03-2005 à 17:52:27

Reply

Marsh Posté le 27-03-2005 à 18:13:52

deux trois remarques

1/ personnelement j'aurai mis la classe clr sur un hr (avec un visibility:hidden)
2/ les id des div des col est pas bon

et sinon j'ai pas réussi non plus a empecher a IE de mettre une hauteur fixe meme avec un hr

---------------
Nos estans firs di nosse pitite patreye...

Reply

Marsh Posté le 27-03-2005 à 21:39:50

Merci pour ta reponse, effectivement un hr semble plus justicieux mais ca n'arrange toujours pas mon affaire.
Pour les id je me c'est une erreur de frappe dans mon exemple mais les id sont bons dans la realite.

Merci encore, Janeiro

Reply

Marsh Posté le 27-03-2005 à 23:10:05

ca n'a rien d'une astuce, c'est assez courant et visible dans de nombreux sites

Reply

Marsh Posté le 27-03-2005 à 23:21:41

Merci pour ton aide
Bref ! :heink:

Pour les autres :
J'ai trouve la solution sur un forum http://www.csscreator.com/ et ca marche (sans epaisseur sous IE)

<div class="clr">&nbrsp;</div>

.clr {
clear: both;
font-size; 0;
overflow: hidden;
height: 0;
}

Reply

Marsh Posté le 28-03-2005 à 10:53:01

Ta solution fonctionne sous IE... mais pas ailleurs

http://blog.alsacreations.com/2004 [...] hr-sous-ie

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

Reply

Marsh Posté le 28-03-2005 à 15:32:28

sibelius a écrit :

Ta solution fonctionne sous IE... mais pas ailleurs

http://blog.alsacreations.com/2004 [...] hr-sous-ie

Oui tu as raison je m'en suis rendu compte ce matin mais j'ai regle le probleme avec une regle specifique pour IE

<div class="clr">&nbrsp;</div>

.clr {clear: both;} /*les autres*/

* html .clr /*IE*/
{
clear: both;
font-size; 0;
overflow: hidden;
height: 0;
}

Edit : je n'utilise pas de hr car le &nbrsp; est important pour que ca fonctionne.
Edit 2: Ca fonctionne chez moi sur Safari, Camino, Firefox (Mac) et IE6, Firefox (Win)

Message édité par janeiro le 28-03-2005 à 16:54:28

Reply

[CSS] Astuce <div class="clr"> sur le float

Sujets relatifs:

Leave a Replay