Karem Karem - 4 months ago 8
CSS Question

CSS float won't work?

Check this picture:

http://img22.imageshack.us/img22/1645/menucss.png

Now explanation: the RED circle is how I want the menu to be - horizontal to the logo - but mine turns out like the green marked, the menu is "under".

And I think the

float
property is the only way to do something like this(?) but it doesn't work, it won't float.

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


What's wrong?

Answer

I can't see the screen shot you posted (blocked by the companies firewall) so I am not sure I know the exact problem. But if I understand correctly you want the Logo and the Menu on the same horizontal line. If that is the case you can:

  1. Float the logo to the left OR

    #logo{
        margin-top: 15px;
        width: 200px;
        height: 30px;
        position: relative;
        right: 5px;
            float:left;
    }
    
  2. Display the logo as inline-block

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