Aller au contenu

Problème de largeur sur des "div"


Sujets conseillés

Posté (modifié)

Bonjour à tous!

Je suis en train de créer un calendrier et voici mon problème: j'ai 1 div qui en contient 7 autres (pour pouvoir placer les jour de la semaine). J'ai mis "float: left" sur ces 7 div pour qu'ils puissent tous être sur la même ligne, mais j'aimerais que les 7 div prennent ensemble la largeur totale du div parent. Et je ne peux pas vraiment placer de largeur fixe, car le même calendrier sera affiché sur plusieurs pages avec des grandeurs différentes et il est un peu compliqué de mettre une largeur variable en % car 100 se divise très mal par 7.

Voici ce que j'ai pour le moment:


<div id="conteneurJour" style="width: 100%;">
<div style="float: left;">Lundi</div>
<div style="float: left;">Mardi</div>
<div style="float: left;">Mercredi</div>
<div style="float: left;">Jeudi</div>
<div style="float: left;">Vendredi</div>
<div style="float: left;">Samedi</div>
<div style="float: left;">Dimanche</div>
</div>

Merci à tous

Jo

Modifié par JoP
Posté

Ben, tu les fait d'une largeur de 13%, et le et le conteneurJour à 91% au lieu de 100 et un margin auto pour que cela se centre dans le bloc.


<div id="conteneurJour" style="width: 91%;margin 0 auto">
<div style="float: left; width: 13%;">Lundi</div>
<div style="float: left;width: 13%;">Mardi</div>
<div style="float: left;width: 13%;">Mercredi</div>
<div style="float: left; width: 13%;">Jeudi</div>
<div style="float: left; width: 13%;">Vendredi</div>
<div style="float: left; width: 13%;">Samedi</div>
<div style="float: left; width: 13%;">Dimanche</div>
</div>

Posté

Merci, mais il faudrait vraiment que la largeur au final soit de 100%, car il y aura des bordures pour délimiter les cases. Serait-il plus simple de le faire avec un tableau??

Merci encore!

Jo

Posté

Ok, merci à vous deux!

Je vais prendre cette alternative dans ce cas.

Jo

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...