Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1136 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1026829
janeiro
Euhhhh...
Posté le 27-03-2005 à 17:52:27  profilanswer
 

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"><!-- conteneur parent-->
 <div id="lefcol">content</div><!-- float left-->
 <div id="rightcol">menu container</div><!-- float right-->
 <div class="clr"></div><!-- astuce -->
</div><!-- /maincontainer-->
 
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
mood
Publicité
Posté le 27-03-2005 à 17:52:27  profilanswer
 

n°1026835
KangOl
Profil : pointeur
Posté le 27-03-2005 à 18:13:52  profilanswer
 

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...
n°1026915
janeiro
Euhhhh...
Posté le 27-03-2005 à 21:39:50  profilanswer
 

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

n°1026968
Profil sup​primé
Posté le 27-03-2005 à 23:10:05  answer
 

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

n°1026974
janeiro
Euhhhh...
Posté le 27-03-2005 à 23:21:41  profilanswer
 


 
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;
    }

n°1027148
sibelius
Vous êtes sûr ?
Posté le 28-03-2005 à 10:53:01  profilanswer
 

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
n°1027358
janeiro
Euhhhh...
Posté le 28-03-2005 à 15:32:28  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Différence entre class et id ?[XTHTLM][CSS] Problemes de validation W3C
Mise en cache de fichier CSS sous MSIE[resolu][CSS] Problème avec boite en float
Mon menu CSS décale tout !!![Réglé][CSS]Aligner mes boutons horizontalement
Faire des onglets: CSS ou JS ?Menu CSS
Positionnement CSS : aaargh ! 
Plus de sujets relatifs à : [CSS] Astuce <div class="clr"> sur le float


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR