28172 sujets

CSS et mise en forme, CSS3

Bonjour a tous,

Je suis face a un problème surement basique, mais qui m'as pris beaucoup de temps aujourd'hui sans que j'ai réussi a le résoudre.

Mon code est le suivant :

#navigation {
margin: 5px;
background-color: #ccc;
min-height: 10px;
height: auto;
position: relative;
}

#navl, #navc, #navr{
display:inline-block;
float: left;
width: 33%;
}

Le bloc navigation de mes rêves ferait donc toute la largueur de la page et contiendrait 3 colonnes de taille égale.

Le problème est que, bien qu'englobant les colonnes dans le html ( code ci dessous ), le bloc est totallement vide ! Les trois collones apparaissent, formatées comme je le souhaite, mais en dehors de leur cadre.

<div id="navigation">
<div id="navl">
Contenu de gauche
</div>

<div id="navc">
Contenu au centre
</div>

<div id="navr">
Contenu a droite
<div>
</div>

Voila tout, j'espère avoir été clair ... et que cela apparaitra évident pour certains !

D'avance, merci. Et n'hésitez pas à demander plus d'info si besoin ( css du body, browser .. )

duk3.
Salut,

Tu peux nous faire un petit jpg avec ce que tu obtiens actuellement et que tu souhaiterais obtenir ?
Bonjour, merci pour vos réponses rapides.

Le problème auquel je suis confronté est en effet un dépassement des flottants, que j'ai résolu en ajoutant simplement la ligne overflow:hidden. Je n'aurai clairement pas pensé a cette propriété pour ça !

Problème résolu donc, merci encore.