[CSS] Blocs en ligne

Bonjour,

J'ai 2 blocs, que je voudrais mettre l'un à coté de l'autre :

Code:

---

1 2 3 4 5 6 7 8 9 10

#con_l { width:204px; border:1px solid #00FF00; }   #con_r { width:589px; border:1px solid #0000FF; display:inline; }

---

Mes deux blocs sont l'un au dessus de l'autre.
C'est bien la propriété display:inline; qu'on doit mettre pour ça ?

Merci.

Hello,
Tu peux effectivement employer display: inline, mais le problème est que l'élément ne pourra alors plus avoir de dimensions (largeur, hauteur)... car c'est la caractéristique des éléments de type en-ligne

Il est préférable d'utiliser le positionnement flottant.

Bonne chance ;)

J'ai deja essayé avec le positionnement avec float mais je n'obtiens pas ce que je veux.
Je m'explique, j'ai bien sûr les 2 blocs, puis en dessous, j'en ai un autre!

Code:

---

1 2 3

<div id="con_l">bloc_1</div> <div id="con_r">bloc_2</div> <div id="bas">bloc_du_bas</div>

---

Le problème est que si je le positionne avec float
- float:left; pour con_l
- float:right; pour con_r

Ca sort du flux normal et donc mon bloc 'bas' se retrouve par dessus les 2 autres...

Pour le display:inline; même en enlevant le width, ça ne fonctionne pas...
Pourtant, ça devrait ?

Code:

---

1 2 3 4 5 6 7 8

#con_l { border:1px solid #00FF00; }   #con_r { border:1px solid #0000FF; display:inline; }

---

Merci.

pour repondre a ton probleme sur float
il faut ajouter un clear both pour ton contenuer du bas

Code:

---

1 2 3

#bas{ clear:both;}

---

:wink:

Citation:

---

Envoyé par jeff_!

pour repondre a ton probleme sur float
il faut ajouter un clear both pour ton contenuer du bas

Code:

---

1 2 3

#bas{ clear:both;}

---

:wink:

---

En effet, avec clear:both; mon bloc "bas" se trouve bien en dessous des 2 autres.

Mais le problème que j'ai avec les floats, c'est qu'ils sortent du flux normal !
Et donc mes 2 blocs sortent du conteneur !!

Je voudrais trouver une solution pour aligner 2 blocs à la suite, tout en restant dans leur conteneur...

Merci de votre aide.

il va nous faloir un oeu plus de code car theoriquement
mais si tu te place en dehors du flux tes doite devrai etre dans ton conteneur

Bonjour,

Et si tu mets les 2 blocs censés être cote à cote en float:left, ça donne quoi ?

Citation:

---

Envoyé par JustAGphy

Bonjour,

Et si tu mets les 2 blocs censés être cote à cote en float:left, ça donne quoi ?

---

Ca me mets bien les 2 blocs l'un à coté de l'autre! Merci.
Mais... En positionnement flottant, les blocs sortent du flux normal et donc
Le contenant sort du conteneur... illustration

Le CSS :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

#content { width:798px; min-height:492px; border:1px solid #FF0000; }   #con_l { width:204px; float:left; border:1px solid #00FF00; }   #con_r { width:589px; border:1px solid #0000FF; float:left; }   #bas { width:796px; height:45px; border:1px solid #000000; text-align:center; clear:both; }

---

Merci.

Citation:

---

Envoyé par Linaa

Mais... En positionnement flottant, les blocs sortent du flux normal et donc
Le contenant sort du conteneur...

---

Oui, ton id="bas" doit se trouver dans le bloc de conteneur, sinon il ne va rien pouvoir pousser :-/

Citation:

---

Envoyé par SIBELIUS

Citation:

---

Envoyé par Linaa

Mais... En positionnement flottant, les blocs sortent du flux normal et donc
Le contenant sort du conteneur...

---

Oui, ton id="bas" doit se trouver dans le bloc de conteneur, sinon il ne va rien pouvoir pousser :-/

---

Justement, je veux que mon bloc "bas" soit en dehors.
Mais ça m'a donné une idée... J'ai fait une div "vide" dans mon conteneur "content".

Code:

---

1 2 3

#vide { clear:both; }

---

Et ça me donne le résultat attendu.
Merci à tous !!

Citation:

---

Envoyé par Linaa

Mais ça m'a donné une idée... J'ai fait une div "vide" dans mon conteneur "content".

---

Oui, comme l'explique le premier lien que je t'ai donné tout au début :wink:

au lieu de faire des conteneur vide
j'utilise <hr/> avec visible:hidden

Citation:

---

Envoyé par jeff_!

au lieu de faire des conteneur vide
j'utilise <hr/> avec visible:hidden

---

J'ai essayé

Code:

---

1 2 3 4 5

hr { visibility:hidden; clear:both; margin:0px; }

---

Ca me laisse quand meme une p'tite marge!

[troll]
Utilise un tableau.
[/troll]

J'ai essayé avec un margin negatif, aucun changement.
J'crois que je vais laisser mon conteneur vide...

Merci !