Le flotteur CSS ne fonctionnera pas?

Question

Mon menu est actuellement sous le logo, mais je veux que ce soit horizontal par rapport au logo. Je pense que la propriété float est la seule façon de faire quelque chose comme ça (?) Mais ça ne marche pas, ça ne flottera pas.

#top_menu { 
height: 20px; 
color: #333; 
position: relative; 
float: right; 
} 

#top_menu ul li { 
     float: left; 
     color:#333; 
     padding-right:15px; 
     font-family: Tahoma, Helvetica, sans-serif; 
     font-size:11px; 
    } 

     #top_menu ul li a { 
      text-decoration:none; 
      color: #666; 
      padding: 1px; 
      padding-right: 8px; 
     } 

       #top_menu ul li a:hover { 
        color:#f2e9c9; 
       } 
#logo{ 
    margin-top: 15px; 
    width: 200px; 
    height: 30px; 
    position: relative; 
    right: 5px; 
} 

     <div id="logo"><a href="http://www.playcreatividad.com/es/index.php"><img src="logot.png" alt="lolly"></a></div> 
    <div id="top_menu"> 
     <ul> 
      <li><a href="http://www.playcreatividad.com/es/index.php" title="Enlace a Portada">Portada</a>|</li> 
      <li><a href="http://www.playcreatividad.com/es/equipo.php" title="Enlace a Equipo">Equipo</a>|</li> 
      <li><a href="http://www.playcreatividad.com/es/workbook.php" title="Enlace a Workbook">Workbook</a>|</li> 
      <li><a href="http://www.playcreatividad.com/es/frescologia.php" title="Enlace a Frescología">Frescología</a>|</li> 
      <li><a href="http://www.playcreatividad.com/es/clientes.php" title="Enlace a Clientes">Clientes</a>|</li> 
      <li><a href="http://playsaid.blogspot.com/" target="_blank" title="Enlace a Blog">Blog</a>|</li> 
      <li><a href="http://www.playcreatividad.com/es/noticias.php" title="Enlace a Noticias">Noticias</a></li> 
     </ul> 

</div> 

Qu'est-ce qui ne va pas?

Answer 1

Si je comprends bien, vous voulez le Logo et le Menu sur la même ligne horizontale. Si tel est le cas, vous pouvez:

1. Float le logo à gauche ou

   #logo{ 
       margin-top: 15px; 
       width: 200px; 
       height: 30px; 
       position: relative; 
       right: 5px; 
        float:left; 
   } 
   

2. Afficher le logo comme inline-block

   #logo{ 
       margin-top: 15px; 
       width: 200px; 
       height: 30px; 
       position: relative; 
       right: 5px; 
        display:inline-block; 
   } 
   

Answer 2

Placez le logo div après le div_menu supérieur.