[Résolu] Souci pour centrer un div en particulier

Bonjour,

j'ai un petit souci au niveau de placement de 4 div, ces div sont dans le flux (aucun absolute ou fixed).
L'image ci-dessous représente mon souci :
http://jalbert.info/surplus/souci.png

Mon but est de centrer le bloc 2 en fonction de la longueur variable.
Je n'arrive pas à réaliser ceci, ce n'est pas faute d'avoir multiplié les tentatives avec tous les float possible et inimaginables.
Mon code HTML est simple:

<div id="header">
	<div id="bloc1"></div>
	<div id="bloc2"></div>
	<div id="bloc3"></div>
	<div id="bloc4"></div>
</div>

Le code CSS est forcément faux, voici la base que je cherche à compléter :

#header {
	height : 50px;
}

#bloc1 {
	background-color: red;
	width: 30px;
}

#bloc2 {
	background-color: green;
	width: 50px;
}

#bloc3 {
	background-color: blue;
	width: 20px;
}

#bloc4 {
	background-color: gray;
	width: 1000px;
}

Je vous remercie d'avance pour l'interet porté à ce post.
Modifié par Bobybx (12 Dec 2006 - 20:25)

salut Bobybx

j'essaierais ceci

#bloc2 {
	background-color: green;
        margin: 0 auto;
	width: 50px;
}

ça devrait fonctionner car tu as donné une largeur fixe à ton bloc
a++
Modifié par deepo (12 Dec 2006 - 12:54)

deepo a écrit :
salut Bobybx

j'essaierais ceci

#bloc2 {
	background-color: green;
        margin: 0 auto;
	width: 50px;
}

ça devrait fonctionner car tu as donné une largeur fixe à ton bloc
a++

Un margin auto me centrera le bloc 2 par rapport au width total de la page et non par rapport à la longueur qui me reste. Cela ne résoud malheureusement pas mon souci. Merci tout de même.

Je suis à l'écoute de toute propo...
Modifié par Bobybx (12 Dec 2006 - 14:57)

salut,

essaie peut-être de sortir le bloc 4 et de mettre les 3 premiers blocs dans un conteneur en float:left.

<div style="float:left;">
<div>bloc 1</div>
<div  style="margin:auto;">bloc 2</div>
<div>bloc 3</div>
</div>
<div style="float:left;">bloc 4</div>

bill_baroud a écrit :
salut,

essaie peut-être de sortir le bloc 4 et de mettre les 3 premiers blocs dans un conteneur en float:left.

<div style="float:left;">
<div>bloc 1</div>
<div  style="margin:auto;">bloc 2</div>
<div>bloc 3</div>
</div>
<div style="float:left;">bloc 4</div>

salut,

merci de ton aide mais désoloé, ceci ne peut pas marcher. Les 3 div iront l'un en dessous de l'autre, il faudrait alors les mettre en float left pour les mettre "sur la même ligne".
Hors, si on pose un float left sur le bloc 3, celui-ci se colle au bloc 2 ne permettant pas à ce dernier de se centrer. Mettre un float right sur le bloc 3 ne marche pas non plus...

J'avoue être désespéré là... S'il y a d'autres idées, je prends

oui, il faut sortir du flux les bloc 1 et 3 :

bloc 1 : position:absolute;left:0;

bloc 3 : position:absolute; right:0;

et mettre le bloc parent en position:relative
Modifié par bill_baroud (12 Dec 2006 - 16:43)

Essaie ça, chez moi ça fonctionne :

	<div>
		<div id="cont">
		
			<div id="b1">bloc 1</div>
			<div id="b3">bloc 3</div>
			<div id="b2">bloc 2</div>
			
			
		</div>
		
	<div id="b4">bloc 4</div>
	</div>

#cont{
position:relative;
float:left;
width:60%;
height:150px;
background:#999999;
}

#b4{
float:left;
width:100px;
height:150px;
background:#CCCCCC;
}

#b1{
width:80px;
height:150px;
background:#669900;
position:absolute;
left:0;
}
#b2{
width:80px;
height:150px;
margin-left:auto;
margin-right:auto;
background:#993300;
}
#b3{
position:absolute;
width:80px;
height:150px;
background:#990066;
right:0;
}

Merci pour ton code bill_baroud mais cela ne correspond pas tout à fait à ca car tu spécifies le width du container via ton "width:60%"., hors mon width restant peut faire 60% de la page comme 10% selon le dimensionnement, d'où mon impossibilité de centrer mon bloc 2 dans ce div de longueur inconnue.


J'explique de manière plus claire ce que je veux exactement:
Le bloc 4 est collé en haut à droite du navigateur pour une longueur fixe que je connais. Il n'est pas en position fixed ou absolue (on ne le voit plus si on scroll en bas de la page).
La longueur restante est inconnue, je ne souhaite pas la préciser dans mon css ou tester avec des pourcentages. Il me faut centrer le bloc 2 sachant que le bloc 1 est collé à gauche et que le bloc 3 est collé au bloc 4.
Re-voici l'image:

http://jalbert.info/surplus/souci.png

Je sais que je suis prise de tête et je m'en excuse. Mais au-delà de mon souci personnel, je me demande sérieusement si ce type d'agencement de blocs est réellement réalisable en CSS.

je ne vois pas trop ce que tu veux dire. Qu'est-ce qui fixe la longueur restante ?

Avec ce code, quelque soit la longueur du bloc, les alignement sont respectés.

Bonsoir

Et en faisant comme ça, est ce que ça pourrait faire ?

Pour le CSS

.conteneur {
    background-color:pink;
    }
    .droite {
    width:200px;
    float:right;
    }
    .gauche {
    margin:0 200px 0 0;
    background-color:green;
    }
    .bloc1 {
    float:left;
    width:100px;
    height: 100px;
    background-color: blue;
    }
    .bloc2 {
    float:right;
    width:100px;
    height: 100px;
    background-color: yellow;
    }
    .bloc3 {
    margin: 0 auto;
    width:150px;
    height: 100px;
    background-color: red;
    }

Puis HTML

<div class="conteneur">
         
           <div class="droite">Largeur fixe </div>
      
           <div class="gauche"><p>
      
              <div class="bloc1">Bloc Nmr 1</div>
              <div class="bloc2">Bloc Nmr 2</div>
              <div class="bloc3">Bloc Nmr 3</div>
          </div>
      </div>

a+
Modifié par pastazere (12 Dec 2006 - 20:08)

pastazere a écrit :
Bonsoir

Et en faisant comme ça, est ce que ça pourrait faire ?

Pour le CSS

.conteneur {
    background-color:pink;
    }
    .droite {
    width:200px;
    float:right;
    }
    .gauche {
    margin:0 200px 0 0;
    background-color:green;
    }
    .bloc1 {
    float:left;
    width:100px;
    height: 100px;
    background-color: blue;
    }
    .bloc2 {
    float:right;
    width:100px;
    height: 100px;
    background-color: yellow;
    }
    .bloc3 {
    margin: 0 auto;
    width:150px;
    height: 100px;
    background-color: red;
    }

Puis HTML

<div class="conteneur">
         
           <div class="droite">Largeur fixe </div>
      
           <div class="gauche"><p>
      
              <div class="bloc1">Bloc Nmr 1</div>
              <div class="bloc2">Bloc Nmr 2</div>
              <div class="bloc3">Bloc Nmr 3</div>
          </div>
      </div>

a+

Merci !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!


Cela résume bien ce que je souhaitais. J'y ai apporté quelques modifications pour que cela puisse s'adapter exactement à ce que je souhaitais. Je comprends totalement ton code et j'avoue ne pas savoir pourquoi je n'y ai pas pensé, ça sert à ça un forum!

Merci pour cette aide à toi, mais aussi à tous les autres !!

Je replonge dans mon css