Les DIV se superposent au lieu dêtre l'une au dessus de l'autre

Bonjour,

J'au un problème sur lequel je cale depuis 2 heures. J'ai fait deux DIV qui je ne sais pour quelle raison se superposent alors qu'elles devraient être l'une sous l'autre.
Voici le code CSS :

/*Barre navigation*/
 #navbar{
    width: 100%;
    font-family: Verdana,Helvetica,Arial,sans-serif; /* On prends les mêmes polices que sur le forum */
}
#navbar ul, #navbar li, #navbar a{ /* On annule certains paramètres prédéfinis qui peuvent poser soucis */
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#navbar li{
    display: inline; /* Cette propriété permet de passer la liste à l'horizontal */
    float: left; /* Le float nous permet de coller les li les uns aux autres */
    margin-right: 1px; /* L'espace de 1 px entre chaque lien */
    font-size: 11px; /*J'ai mis une taille en px, sur le forum elle est en em; je pense qu'on a globalement la même chose */
    font-weight: bold; /* Sur le forum c'est en gras, le but étant d'avoir le même rendu... */
}
#navbar li a{
    display: block; /* Les liens passent à un type block, afin de rendre la zone cliquable plus grande */
    color: #536482;
    text-decoration: none;
    padding: 6px 10px 6px 5px; /* Le même padding que sur le forum */
    background: url(/Forum/images/bg_tabs2.gif) bottom repeat-x;
    /* Là l'image est en fait celle qui se trouve à l'adresse suivante:
    "styles/prosilver/theme/images/bg_tabs2.gif"
    ici le rendu n'est pas le même, il faudrait refaire l'image pour quelque chose de plus correct*/
}
#navbar li a:hover{
    color: #BC2A4D; /*La couleur des liens au survol */
}

#bandeau {
margin-left: 1px;
width: 100%;
height: 60px;
border : 1px solid transparent;
background-image: url(/Forum/images/bg_tabs2.gif);
}

Et la façon dont il est appelé en php :

<div id="navbar">
    <ul>
        <li><a href="#">Forum Windows</a></li>
        <li><a href="#">Sécurité</a></li>
        <li><a href="#">Matériel</a></li>
        <li><a href="#">Logiciel</a></li>
    </ul>
</div>
<div id="bandeau">
</div>

Et le résultat : -http://www.micro-astuce.com/test

Je ne comprends pas pourquoi, merci de votre aide.

Bonjour, si tu mets un display: inline, pas besoin de float: left.

Et pas besoin du display: block sur tes liens pour rendre la zone plus grande. À moins que je ne comprenne pas bien ce que tu veux faire.

Salut,

Sans le float: left les onglets sont les une au dessus des autres et sans display: block l'écratement entre chaque onglet et trop important.
Ceal dit j'ai réglé mon problème avec un

.spacer {
  clear: both;
}

Bonjour, tant mieux si cela fonctionne mais j'ai testé ton code en enlevant le float: left et le display: block et les onglets s'aligne correctement... et les deux div sont une par dessus l'autre.