[Résolu] Comment positionner 2 divs l'un à côté de l'autre

Bonjour,

Voici une question sur laquelle je bute... j'avais déjà réussi mais à force, je ne m'y retrouve plus o(( Je sais que ça doit être simple, et pourtant....

Alors voilà, j'ai un div global "content" qui englobe 2 divs (ici div produit 1 et div produit 2).
Les divs produit 1 et produit 2 se placent l'un en dessous de l'autre, ce qui est tout à fait normal.

J'aimerai que les divs produit 1 et produit 2 se placent l'un à côté de l'autre, et pas l'un en dessous de l'autre. On me déconseille d'utiliser les float:left pour faire cela.

Qu'en pensez-vous et comment feriez vous ?

Ci-après un exemple de htlm

<div id="content">
<div id="produit1">
<img src="images/parure_camelia.jpg" alt="Parure Camélia" width="120" height="136" title="Collection de bijoux pour le mariage"/>
<p>Camélia</p>
</div>
<div id="produit2">
<img src="images/parure_orchidee.jpg" alt="Parure Orchidée" width="120" height="136" title="Collection de bijoux pour le mariage"/>
<p>Orchidée</p>
</div>
</div>

Modifié par pp51 (23 Jun 2006 - 15:01)

Salut !
AU lieu d'avoir deux divs a positionner et un div qui les englobe , gardes juste les deux divs., dont un que tu mettra en float:left;display:inline.

Merci Ralfman68, ça marche très bien.

Avant de classer le message comme résolu, une dernière question sur ce même sujet.

J'ai inséré un div produit3 et voulant le placer à côté du div produit2, j'ai donc mis un display:inline

Le problème est que ce div produit 3 se place en dessous du div produit 1, et pas à droite du div produit 2

Comment faire (en gros je vais avoir à mettre 4 divs les uns à côté des autres) ?

Merci beaucoup

voici la css

#produit1{
float: left;
margin-right: 20px;
}
produit2 {
display: inline;
}
produit3 {
display: inline;
}

pour avoir 4 div juxtaposés : tu les mets les 4 en float:left; display:inline.
Le float left permet de faire les divs se placer l'un a coté de l'autre et le diplay:inline permet de corriger un bug de marges sur IE.

Merci encore une fois

Je pensais que les float servaient par exemple à positionner un menu de gauche et/ou de droite => les grands blocs d'une page.

Ne vaut-il pas mieux utiliser les positionnement absolute et/ou relative pour positionner mes divs produits (peut-être, mais en tout cas, je n'y parviens pas...)

Si ne n'est pas possible, je vais effectivement utiliser les float...

A moins que qq'un me dise le contraire

RE : Effectivement tu peu positionner en absolute, mais il vaut mieut utiliser les float qui sont faits pour ça. J'avais lu quelque part que le positionnement absolu doit être reservé en cas de derniers recours si on ne peut pas faire autrement (pour quelles raisons : mystère...)

Je me dis que c'est parce que le positionnement en absolu sort l'élément du flux et donc n'est plus pris en compte comme point de référence notamment dans le cas d'un design fluide : si tu as un conteneur que tu veux extensible selon son contenu et que le contenu se trouve dans un div en absolu, le conteneur ne s'étend pas parce que son contenu n'est pas dans le flux.

Je pense que ca doit être pour cela.

Ralfman68 a écrit :
RE : Effectivement tu peu positionner en absolute, mais il vaut mieut utiliser les float qui sont faits pour ça. J'avais lu quelque part que le positionnement absolu doit être reservé en cas de derniers recours si on ne peut pas faire autrement (pour quelles raisons : mystère...)

j'avais ca moi

<div>
  <img>
  <div flottant>
  </div>
</div>

Le div flottant ne veux pas flotter à coter de l'image (meme en mettant l'image en inline), il se mettait toujours en desous. Du coup, j'ai mis ce bloque en absolue par rapport au bloc parent avec pour left la valeur de la largeur de l'image

=>Norky : je ne comprends pas bien ce que tu veux dire, mais le div qui englobe l'image ET l'autre div flottant est inutile, et normalement, il me semble qu'on devrait réussir à placer un div en flottant à coté d'une image sans toucher aux marges.

<img>
  <div flottant>
  </div>

img,  #flottant {float:left;display:inline}

Modifié par Ralfman68 (22 Jun 2006 - 14:14)

beh, bizarrement, non
mais je viens de voir que ma "configuration" n'est pas vraiment comme ca.
la voila :

<div id="header">
  <img>
  <ul id="menu">
    <li>...
  </ul>
</div>

C'est un ul que je n'arrive pas à aligner avec l'image en le flottant.
J'ai donc mis ul en aboslue.
J'ai pourtant essayer de metre img et ul en flottant, mais rien n'y fait.
Mais bon, c'est pas bien grave car mon aboslue ne gène en rien et s'intègre très bien dans un design fluide.

Bon merci à tous pour vos avis.

Je reste donc sur l'utilisation des float left pour positionner mes div produit...

Bon match...