[Résolu]Garder 3 blocs <div> sur la même ligne

Bonjour ,

Je voudrai afficher une page de la maniere suivante :

Bloc1 Bloc2 Bloc3


Chaque bloc etant un <div>

Avec :
Le bloc1 toujours a gauche
Le bloc3 toujours a droite
Le Bloc2 occupant la place qui reste entre le Bloc1 et le Bloc 3


J'ai fait l'essai suivant

<div id="Bloc1" > ... >Div>
<div id="Bloc2" > ... >Div>
<div id="Bloc3" > ... >Div>

et le CSS suivant :

#Bloc1 {float:left ;   width:150px ; margin-left: auto;	margin-right: auto;}
#Bloc2 {               width:100%  ; margin-left: auto;	margin-right: auto;}
#Bloc3 {float:right;   width:150px ; margin-left: auto;	margin-right: auto;}

Mais helas le bloc3 passe a la ligne suivante et j''obtiens :

Bloc1 Bloc2
Bloc3


Avez-vous une idee de comment faire cela ?

Cordialement
Denis
Modifié par denisdlu7 (02 Sep 2005 - 04:50)

Bonjour Denis et bienvenue,

dans un premier il serait bien que tu puisse éditer ton message et utiliser la balise nécéssaire pour présenter ton code .

Sinon dès le départ les positions des tes blocs dans le code html n'est pas bon si tu utilise les flottants et c'est normal que ton bloc 3 passe à la ligne.

Un flottant doit toujours précéder le bloc par rapport à laquelle il doit flotter.

Ton flottant droit c'est à dire le bloc 3 doit donc, dans l'ordre du flux (ton code html) intervenir avant ton bloc 2 pour que le positionnement s'effectue correctement.

EDIT:
je n'ai plus le temps de regarder, mais en utilisant la fonction recherche et le mot colonne tu devrait avoir des réponses à tes questions.
Modifié par knarf (01 Sep 2005 - 15:10)

Voici comment on procède pour une mise en pages 3 colonnes.

Le CSS :

#gauche { 
   float: left; 
   width: value; 
}
#droite { 
   float: right; 
   width: value; 
}
#centre { 
   margin-right: value; /* largeur de la colonne droite */
   margin-left: value; /* largeur de la colonne gauche */
}

Le HTML :

<div id="gauche"></div>
<div id="droite"></div>
<div id="centre"></div>
<hr />

Pour plus de contrôle sur l'ordre de présentation des colonnes, tu peux envisager la variante suivante :

#gauche { 
   position: absolute; 
   top: 0; 
   left: 0; 
   width: value; 
}
#droite { 
   position: absolute; 
   top: 0; 
   right: 0; 
   width: value; 
}
#centre { 
   margin-right: value; /* largeur de la colonne droite */
   margin-left: value; /* largeur de la colonne gauche */
}

Et les possibilités suivantes dans le (X)HTML

<div id="gauche"></div>
<div id="droite"></div>
<div id="centre"></div>

<div id="gauche"></div>
<div id="centre"></div>
<div id="droite"></div>

<div id="droite"></div>
<div id="gauche"></div>
<div id="centre"></div>

<div id="droite"></div>
<div id="centre"></div>
<div id="gauche"></div>

<div id="centre"></div>
<div id="gauche"></div>
<div id="droite"></div>

<div id="centre"></div>
<div id="droite"></div>
<div id="gauche"></div>

Tu peux aussi jeter un oeil sur : 3 Colonnes flottantes et un ordre HTML rigoureux

Bonjour, après une petite recherche sur le forum je suis tombé sur ce post qui répond en parti à mes questions en proposant une solution pour 3 div sur la même ligne. Mais (et oui le fameux "mais") j'aimerai aller un peu plus loin. Je suis en train de réalisé un forum pour mon usage personnel et celui est basé sur... 4 colonnes ^^ et j'aimerai pouvoir réaliser ça avec une structure HTML de ce type :

<p class='thread'>
	<div class="titre">J'aime le CSS</div>
	<div class="auteur">Toto</div>
	<div class="reponses">4</div>
	<div class="derniere">Dimanche dernier</div>
</p>

Là déjà je n'ai pas trouvé de solution esthétique, mais (encore un mais ) j'y ajouté le fait que ce soit le la colonne du titre qui doit être de taille relative. J'ai passé un bonne après-midi sur le problème sans trouver de solution convenable. Auriez vous une piste intéressante ?

Salut je crois que cette solution va marcher , en tout cas sur firefox et IE

.thread { clear:both;background-color:#777; }
#auteur    {float:right    ;width: 200px;background-color:#00CC00;}
#reponses {float:right     ;width: 200px;background-color: #99CC33;}
#derniere {float:right     ;width: 200px; background-color: #FFFF99;}
#titre  {float:left ;background-color: #FF9900; margin-right:auto }

et avec

<div class="thread">
<p id="derniere">derniere</p>
<p id="reponses">reponses</p>
<p id="auteur">auteur</p>
<p id="titre">titre tres long pour voir ce que ca donne</p>
</div>

Bon courage
Cordialement
Denis

Majddar a écrit :
Mais (et oui le fameux "mais") j'aimerai aller un peu plus loin. Je suis en train de réalisé un forum pour mon usage personnel et celui est basé sur... 4 colonnes ^^ et j'aimerai pouvoir réaliser ça avec une structure HTML de ce type [... ]

Bonjour et bienvenue denisdlu7 sur Alsacréations,

Les tableaux c'est très bien aussi pour ce genre de chose et à mon avis tout indiqué. Tu peux par exemple regarder la source de ce forum .

merci beaucoup pour les réponses. Je suis arrivé à peu près à la même solution mais ça fonctionne pas toujours génail

Il est vrai Igor que les tableaux seraient plutot indiqué mais je voulais aussi faire ça en tant qu'exercice de style pour me débarrasser des tableaux. J'ai surtout pensé aux navigateurs en mode texte qui ne s'en sortent pas génialement avec ce genre de tableau. Enfin, je vais me résigner car aligner des "float" ne me semble pas super élégant non plus (Je dis ça alors que je vais avoir une "bordure" de tableau faite avec des images... pas très élégant au niveau html mais je n'ai pas encore trouvé de belle solution en CSS)

En tout cas merci à vous pour le coup de main.

Stephan a écrit :

Tu peux aussi jeter un oeil sur : 3 Colonnes flottantes et un ordre HTML rigoureux

Je n'ai pas du tout compris comment ca marchait sur cette URL, mais ca m'interresse beaucoup ?

Quelqu'un pourrait m'expliquer ?