28173 sujets

CSS et mise en forme, CSS3

[Résolu] <div> en ligne dans un conteneur en position relative

Bonjour à tous,

Le corps de page est composé d'un <div> de 80% de largeur, placé en position relative, de façon à ce qu'il soit centré.

A l'intérieur de ce "container", je cherche à positionner deux cellules (aussi des <div>) horizontalement. Je ne sais pas comment m'y prendre dans ce cas de figure.

Pourriez-vous me donner un chti coup de pousse svp ?


CODE HTML: 
<body>

<div class="container">

<div class="gauche">
<p>blablabla</p>
</div>

<div class="droite">
<p>blablabla</p>
</div>

</div>

</body>




CSS :
body { color: #306; font-size: 1em; font-family: "Comic Sans MS"; width: 100% }
.container { background-color: #c8daff; position: relative; width: 80%; margin: auto}
.gauche { background-color: white; width: 45% }
.droite { background-color: white; width: 45%; }

Modifié par helln (16 Feb 2006 - 21:23)
Bonjour Xavier,
C'est ce que j'ai fait, mais comme je suis en position relative, les deux cellules du centre "dépassent" du conteneur...
a écrit :
C'est ce que j'ai fait
???? où ça ?, je ne vois pas l'ombre d'une trace du moindre float dans ton code !
a écrit :
mais comme je suis en position relative, les deux cellules du centre "dépassent" du conteneur
Je suis complètement dépassé par l'argument.
Enfin tu peux enlever ton position:relative, ça ne change rien pour l'exemple que tu as fourni. Sans doute comptais tu là dessus pour exploiter z-index, mais comme les 2 cellules sont supposées être l'une à coté de l'autre, elle n'ont aucune raison de se superposer...

Franchement, fais juste un petit effort, et ajoute la propriété float à tes 2 cellules, ça marche très bien.
a écrit :
???? où ça ?, je ne vois pas l'ombre d'une trace du moindre float dans ton code !

Lorsque j'ai testé les float left pour les deux cellules gauche et droite, elles ont disparues (sous le conteneur suivant), d'ou les z-index effectivement.

Désolé mais la méthode du float fonctionne bien avec un conteneur en position fixe, mais pas en position relative centré à 80%.

Donc si quelqu'un d'autre à une idée... Je ne suis pas si faignante Smiley cligne merci du compliment Xavier Smiley biggol
Modifié par helln (16 Feb 2006 - 20:18)
Bonsoir Mpop et merci 1000 fois pour cette page vraiment "taillée sur-mesure". D'ailleurs ton futur site (je présume) regorge déjà de "petits trucs" bien puissants !! Il est dans mes favoris, j'attends la suite !

En rajoutant simplement la propriété overflow:auto à mon fameux conteneur, comme par magie, celà fonctionne !

Bonne soirée et encore merci Smiley lol Smiley lol je vais pouvoir passer à la suite Smiley sweatdrop
"horizontaux" : ce sont les blocs .gauche et .droite (largeur 45%) qui doivent l'être, tout en étant contenu dans un bloc parent (80% centré au milieu)

"l'un sur l'autre": ça voudrait dire qu'ils sont verticaux, ce qui n'est pas mon objectif dans cet exemple.

@+
LN
Ok,

Dans ce cas je parle plus simplement de colonnes, emprunté au monde de la publication papier, je pense que ce terme convient mieux Smiley cligne Bon courage pour la suite.
Sujet clos
Aller à