Problème de positionnement de bloc

Bonjour,

Je rencontre un problème de positionnement de blocs. Il doit y avoir un problème de flux, j'ai essayé position absolue, clear : both ..., mais je ne trouve pas, aussi je fais appel à toutes vos connaissances.

En fait, j'ai un "bloc principal" à fond blanc sur un "conteneur" de couleur. A côté de ce bloc principal, toujours dans le conteneur , il y a un bloc "secondaire" qui correspond à des news et qui n'a pas la même hauteur de bloc, mais pour tout ça c'est bon.

Mon problème est arrivé quand j'ai vu la page, que j'ai trouvé que cela faisait trop de blanc. Alors j'ai découpé mon bloc principal en plusieurs blocs afin d'avoir un bloc fond blanc, un peu de couleur, un bloc fond blanc, etc... Si je suis le flux : le bloc secondaire se trouve complètement décalé vers le bas et en dehors de ses limites,

Comment faire en sorte qu'il soit à côté du 1er bloc principal avec les autres sous le bloc principal.

Je joins une image pour explications


Quelqu'un peut-il m'aider ???

Merci

Salut,

Avec du code je pense que tu auras plus de succès
Pour le moment on ne sait pas ce que tu as fais donc on peut pas déceler d'erreurs.

Oops !!!
Voila le code :

<div id="global">
<div id="entete">
	<p><img src="" alt="IMAGE ENTETE" width="900" height="110" border="2"/></p>
	
</div>
<!-- #entete -->
 <div id="navigation">
		<ul>
			<li class="gauche">AAAAAA |</li>
			<li class="gauche"><a href="liste.html">BBBBBB</a> |</li>
			<li class="gauche"><a href="utiliser.html">HHHHHH</a> |</li>
		</ul>
</div><!-- #navigation -->

	<div id="centre">
		<div id="principal">
        <div id="block"><h2>TITRE 1</h2>
        	<p><img src="" alt="image" width="220" height="144" hspace="10" align="left" border="1" /><br />
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
          </div>
       <div id="secondaire">
		  <h3>Actualit&eacute;s</h3>
          <a href="">excellente ann&eacute;e 2011!!!</a>
			<h3>Derni&egrave;res nouvelles</h3>
			<a href="#">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce volutpa...</a></h3>
          <h3>Articles &agrave; lire</h3>
           <a href="#">Pellentesque habitant morbi tristique senectus et netus et 
                malesuada fames ac turpis egestas. Fusce volutpa...</a></p>
            <h3> etc....</h3>
       </div>
        <div class="clear"></div>
        <div id="block">  
        <h2>TITRE 2</h2>
       <p>Pellentesque vitae nisl dolor. </p>
        <p>amet, consectetur adipiscing elit. Suspendisse vel consectetur nunc.</p></div>
      <p>&nbsp;</p>
      <div id="block">  <h2 >BUREAU</h2>
       <p>Nunc sollicitudin tortor at lectus vulputate pharetra. Nulla ultricies 
consequat arcu ac vestibulum. </p>
		</div>
		
  <h4>Vivamus ornare, ante a scelerisque fringilla, lacus sapien suscipit lectus, quis 
volutpat magna magna ut dui.  etc.....      
        </h4>
        </div>
       </div> 
	  </div>

body {
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 20px;
	padding-left: 5px;
}
#global {
	width: 900px;
	margin: 0 auto; 
}

/* Bloc central */
#centre {
	width: 100%; 
	overflow: hidden;
	background: url(img/08-colonnes2.png) repeat-y; 
}
/* Contenu principal
#principal {
	float: left; 
	width: 590px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 10px;
}
/* Contenu secondaire */
#secondaire {
	margin-left: 620px;
	margin-right: 12px;
	margin-top: 20px;
	padding-top: 12px;
	padding-right: 0;
	padding-bottom: 12px;
	padding-left: 12px;
	color: #0054A6;
}
.clear {
	clear: both;
}
#block {
	width: 100%;
	background-color: #FFF;
	padding: 8px;
}

Donc comme je disais avec ce code j'ai l'apparence voulue mais le bloc secondaire se retrouve décalé vers le bas et repousseles autres vers le bas .

L'image sur mon message précédent illustre tout à fait le poblème
Merci

Bonjour,

Pour commencer, note que tu ne peux pas avoir deux éléments avec le même identifiant (valeur de l'attribut id. Le code suivant n'est donc pas valide:

<div id="block">...</div>
<div id="block">...</div>

Si tu veux utiliser le même style sur plusieurs éléments, il est préférable d'utiliser une classe. Avec éventuellement des identifiants spécifiques à chaque bloc si c'est utile. Par exemple:

<div id="block1" class="block">...</div>
<div id="block2" class="block">...</div>

Pense à toujours valider ton code HTML, surtout avant de demander de l'aide pour un problème de mise en page. http://validator.w3.org/

Ensuite, pour réaliser cette mise en page il serait préférable d'avoir un DIV pour la colonne de gauche, et un autre pour la colonne de droite. Celui de gauche contiendra tes trois blocs, ça ne pose pas de problème.

Merci beaucoup !!!!

ça va bien mieux

Bonjour,

J'ai toujours un souci, aussi je vous envoie le lien comme ça vous allez voir en direct mon problème !!!! surtout bien aller en bas de la page pour voir le souci !!!

http://atnh.net/REFONTE/probleme/index.html

Merci pour votre aide !

Bonjour, tu dois positionner ton div #secondaire au début de ton div #centre.

Tu as aussi quelques erreurs de validation. Tu ne peux utiliser deux fois le même id, utilise une class à la place. ( par exemple ton div block)