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.

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.

<div id="menu">

</div>

<div id="main">

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

</div>

#menu{
float:left;
}


#main{
float:left;
}

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

bonjour,

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

[html]
<div id="menu">

</div>

<div id="main">

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

</div>
[/html]

css:

[css]

#menu{
float:left;
}


#main{
float:left;
}

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

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

#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;
  }

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 : [url=http://www.hostingpics.net/viewer.php?id=930029probleme.png][img]http://img4.hostingpics.net/thumbs/mini_930029probleme.png[/img][/url]

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 :

[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>[/php]


----> Le code CSS des divs :

[css]
#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;
}
[/css]

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


Cordialement.