Discussion :

[Linaa]

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[SIBELIUS]

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

[Linaa]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#con_l {
	border:1px solid #00FF00;
}
 
#con_r {
	border:1px solid #0000FF;
	display:inline;
}

Merci.

[jeff_!]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
#bas{
clear:both;}

[Linaa]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
#bas{
clear:both;}

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.

[jeff_!]

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

[JustAGphy]

Bonjour,

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

[Linaa]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[SIBELIUS]

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 :-/

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#vide {
    clear:both;
}

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

[SIBELIUS]

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

[jeff_!]

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

[Linaa]

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

J'ai essayé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
hr {
   visibility:hidden;
	clear:both;
	margin:0px;
}

Ca me laisse quand meme une p'tite marge!

[Caerbannog]

[troll]
Utilise un tableau.
[/troll]

[Linaa]

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

Merci !