Forum d'entraide PHPFrance

Bonjour à tous.

Je me permets de poster ce sujet, car je n'ai trouvé nulle réponse autre part.

Mon problème est simple, et tient en une image :

La div du côté (menu, en gris) est décalée par rapport à la div (main). Essayant essayé de jouer avec les floats, je n'arrive pas à faire remonter mon "main" vers le haut, au même niveau que "menu" (en gris).

----> Le code PHP :

<div id="menu" align="center">
				
				
				<ul>				
		<li><a class='menu' href=''>Texte</a></li>
		<li><a class='menu' href=''>Texte</a></li>
                <li><a class='menu' href=''>Texte</a></li>
                <li><a class='menu' href=''>Texte</a></li>
                <li><a class='menu' href=''>Texte</a></li>
                <li><a class='menu' href=''>Texte</a></li>
                <li><a class='menu' href='livre.php'>Livre d'or</a></li>
		<li><a class='menu' href='contacter.php'>Contact</a></li>
				</ul>
				
			</div>
			
			<div id="main" style="border: 1px solid; padding: 10px; ">
			
				<div align="center" id="frame"><font size="5"><b>Livre d'or</b></font></div><br>
				
				<?php
				$chem_absolu = './livreor/';
				include './livreor/index.php';
				?>
				
			</div>

----> Le code CSS des divs :

#menu {
  background: #696969;
  width: 145px;
  height: 261px;
  padding: 8px;
  border:1px solid #000000;
  margin-top: 0px;
  }

#frame {
width:95%;
margin:auto;
padding:10px;
background-color:#FFFFFF;
border-left:1px solid #000000; 
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;

}

#main {
  color: black;
  background: white;
  margin-left: 167px;
  margin-right: 0px;
  margin-top: 1px;
  font-family: Verdana, sans-serif;
  }

Si quelqu'un pouvait m'aider à résoudre ce problème, ça serait bien sympathique pour l'avancée de mon projet.


Cordialement.

bonjour,

tu peux sortir les 2 blocs (menu et main) du flux en les faisant float:

<div id="menu">

</div>

<div id="main">

</div>
<div id="clear">

</div>

css:

#menu{
float:left;
}


#main{
float:left;
}

#clear{
clear:both; /* annulation des floattants sur les blocs suivant*/
}

Bonsoir.

Tout d'abord, merci pour ta réponse rapide.

Avec ma technique, ça marche, mais à moitié, en fait, il faut que je conserve tout le CSS du #menu, en incluant float:left;, et ça fonctionne.

Bien sur, en appliquant aussi ta technique de "clear". Je ne connaissais pas. Merci beaucoup.

de rien.en fait la propriété clear à both permet d'indiquer qu'un élément suivant un flottant(bloc flottant) doit se positionner en dessous des blocs flottants.