28172 sujets

CSS et mise en forme, CSS3

DIV de largeurs variables

Bonjour à tous !

Je me trouve confronté à un problème de mise en page CSS, cela fait des jours que je cherche sur le net, mais je ne trouve pas vraiment la solution.
En fait, j'aimerai avoir, dans un DIV conteneur, deux DIV alignés horizontalement de tailles variables mais qui remplissent constamment le DIV conteneur.

Concrètement, j'ai un DIV gauche qui contient du texte sur une couleur de fond, et un DIV droite qui contient des boutons (nombre de boutons variables, donc la largeur aussi).
J'aimerai que le DIV de gauche soit toujours à 100%, qu'importe le nombre de boutons dans le DIV de droite.

Voici une illustration (un peu plus claire je pense) de mes propos :

http://img5.hostingpics.net/pics/322093alsa.gif

Le code (schématisé) que j'ai trouvé, le plus proche de ce que je veux faire, est celui-ci :

<div id="conteneur">
	<div id="boutons" style="background: red; float: right;">
		<div style="float: left;"><a href="#" style="display: block; width: 20px; height: 20px;"></a></div>
		<div style="float: left;"><a href="#" style="display: block; width: 20px; height: 20px;"></a></div>
		<div style="float: left;"><a href="#" style="display: block; width: 20px; height: 20px;"></a></div>
		<div style="float: left;"><a href="#" style="display: block; width: 20px; height: 20px;"></a></div>
		<div style="clear: both;"></div>
	</div>
	<div id="content" style="background: blue;">
		<div style="height: 35px;">Content</div>
	</div>
</div>

... sauf que la couleur de fond de mon DIV 1 passe sous les boutons (logique vu qu'ils sont dans un DIV en float).

Help !! Smiley decu
Merci d'avance.
Modifié par etienne727 (11 Jun 2009 - 16:06)
UP

Sois je pose une sacrée colle, soit j'ai atteint là les limites du CSS.
Finalement les table, ça a du bon Smiley cligne
Modifié par etienne727 (15 Jun 2009 - 09:30)
Salut,

Peut-être quelque chose comme :

<div id="conteneur">
  <div id="menu">
    <button>OK</button>
    <button>OK</button>
    <button>OK</button>
    <button>OK</button>
  </div>
  <div id="content">
    DIV 1
  </div>
</div>


#conteneur {
  padding : 5px;
  background : yellow;
  overflow : hidden;
}

#content {
  background : red;
}

#menu {
  background : blue;
  float : right;
  white-space : nowrap;
  padding : 3px;
}
Hello et merci de me répondre Smiley cligne

En fait, le résultat est un peu le même qu'avec mon code.
Le problème est que le DIV contenant les boutons ne prend pas toute la hauteur du DIV conteneur (logique vu qu'il est en float).
ça malheureusement, tu ne pourras l'obtenir qu'avec des colonnes factices (impossible ici, vu que les colonnes ont des largeurs variables) ou un display: table-cell; mais qui sera incompatible avec IE6-7 (bon tant que ça reste lisible c'est pas trop grave).
Ou alors, comme tu as un height sur ton div1, tu peux le mettre aussi sur le div2. Smiley langue

Mais je doute qu'il restera et que c'était juste pour l'exemple.
Laurie-Anne a écrit :
ça malheureusement, tu ne pourras l'obtenir qu'avec (...) un display: table-cell

Raté, il y a une autre solution: utiliser un contexte de formatage.

etienne727 a écrit :
Sois je pose une sacrée colle, soit j'ai atteint là les limites du CSS.

Deux solutions en CSS:
- utiliser display:table-cell, comme le propose Laurie-Anne;
- utiliser un contexte de formatage pour que la largeur de DIV 1 s'adapte au flottant.

L'utilisation d'un contexte de formatage est présentée ici:
http://www.alsacreations.com/tuto/lire/588-trois-colonnes-float.html
ou encore ici:
http://covertprestige.info/test/31-marges-et-contexte-de-formatage.html

Limite de l'utilisation d'un flottant: il faut savoir à l'avance lequel des deux DIV sera le plus haut. Le DIV le plus haut devra dessiner le filet grâce à un border (border-left ou border-right). Le DIV le plus court n'aura pas de couleur de fond, et laissera apparaitre la couleur de fond du conteneur.

Avec du display:table-cell (ou, pour une compatibilité IE 6-7 complète, un tableau de mise en page), tu n'as pas cette contrainte.
Le problème, ici, c'est d'avoir deux colonnes de même hauteur. Mais avec des largeur variables.

Donc utiliser un contexte de formatage ne permettra pas d'avoir le résultat espéré. Ou alors y a une nuance qui m'échappe.
Modifié par Laurie-Anne (15 Jun 2009 - 12:34)
Sujet clos
Aller à