[RÉGLÉ] Tailles de Divs différentes dans un container

[blopee]

Bonsoir,

Actuellement, la page d'accueil de mon site dispose d'un conteneur principal #jm-header-wrapper-space qui contient 3 divs nommées "jm-module".

Ces trois divs, afin d'être alignées, sont de même taille (33,3333333%), voici le code CSS appliqué:

#jm-header-wrapper-space .jm-module {
  width:33.3333333333333333333%;
  float:left;
  text-align:center;
}

Or j'aurais souhaité que la bannière fasse 30%, la carte 50% et le menu de droite 20%....donc 100% en tout.
J'ai donc appliqué un suffixe de classe CSS différents sur mes trois DIVs(Modules)
Voici donc le code CSS que j'ai tenté d'appliquer:

#jm-header-wrapper-space .jm-module ban img {
  width:30%;
  float:left;
}
#jm-header-wrapper-space .jm-module regions {
  width:20%;
  float:right;
}
#jm-header-wrapper-space .jm-module carte {
  width:50%;
  overflow:hidden;
}

Mais du coup avec ce code, les DIVs se placent l'une en dessous de l'autre et non côte à côte....pourquoi?
Voici le site pour un petit firebug: http://www.blopee.fr

Merci de votre aide

[PhilJ]

Re : Tailles de Divs différentes dans un container

Bonjour,

Actuellement, la page d'accueil de mon site dispose d'un conteneur principal #jm-header-wrapper-space qui contient 3 divs nommées "jm-module". [...] Or j'aurais souhaité que la bannière fasse 30%, la carte 50% et le menu de droite 20%....donc 100% en tout. J'ai donc appliqué un suffixe de classe CSS différents sur mes trois DIVs (Modules). Voici donc le code CSS que j'ai tenté d'appliquer :

#jm-header-wrapper-space .jm-module ban img {
  width:30%;
  float:left;
}
#jm-header-wrapper-space .jm-module regions {
  width:20%;
  float:right;
}
#jm-header-wrapper-space .jm-module carte {
  width:50%;
  overflow:hidden;
}

Mais du coup avec ce code, les DIVs se placent l'une en dessous de l'autre et non côte à côte....pourquoi ?

A essayer (sans même utiliser les float) :

.ban {

width: 30% !important;

}
.carte {

width: 50% !important;

}
.regions {

width: 20% !important;

}


Cordialement,



PhilJ

...très probablement à adapter dans le cas d'un accès depuis un appareil mobile.

[blopee]

Re : Tailles de Divs différentes dans un container

Non je viens de tester, les DIVs ont la bonne taille à priori mais se retrouvent les unes en dessous des autres....

[blopee]

Re : Tailles de Divs différentes dans un container

Avec ce code, j'obtiens la bannière et la carte alignés.....mais les régions se retrouvent en dessous en flottement à droite....

.ban {
width: 30% !important;
  float: left;
}
.carte {
width: 40% !important;
  overflow: hidden;
}
.regions {
width: 20% !important;
  float:right;
}

[blopee]

Re : Tailles de Divs différentes dans un container

Ca y est j'ai trouvé un code qui fonctionne:

.ban {
width: 30% !important;
  float: left;
}
.carte {
width: 50% !important;
  float: left;
}
.regions {
width: 20% !important;
  float:left;
}

Selon vous, c'est propre ou je peux optimiser.....j'entends par là "Dois-je garder mes suffixes de classe CSS ou y avait-il mieux à faire ?"

[PhilJ]

Re : Tailles de Divs différentes dans un container

Bonjour,

Ca y est j'ai trouvé un code qui fonctionne:

.ban {
width: 30% !important;
  float: left;
}
.carte {
width: 50% !important;
  float: left;
}
.regions {
width: 20% !important;
  float:left;
}

Selon vous, c'est propre ou je peux optimiser.....j'entends par là "Dois-je garder mes suffixes de classe CSS ou y avait-il mieux à faire ?"

Non, c'est la bonne méthode, d'autant qu'elle vous permettra de mettre en place des adaptations pour mobiles sans trop de difficultés.

Juste une remarque : les 3 modules en question sont déjà en mode flottant à gauche.

En effet, vous avez déjà ceci avant même vos personnalisations :

#jm-header-wrapper-space .jm-module {

float: left;

}

Or, les 3 modules en question sont déjà définis avec #jm-header-wrapper-space .jm-module.

=> Donc — voyez mon 1er message — l'instruction float: left; est ici redondante. Elle ne sert à rien, et vous devriez donc pouvoir vous dispenser de la répéter dans les containers .ban, .carte et .regions.


Cordialement,



PhilJ

[blopee]

Re : Tailles de Divs différentes dans un container

Oui en effet #jm-header-wrapper-space .jm-module ne me permettait pas de dissocier les 3 Divs qui du coup portaient la même classe.

J'ai donc commenté cette ligne afin de faire des tests, je vais la supprimer à présent.

Merci de votre aide en tout cas