Problème CSS Float

Résolu/Fermé
Patachouuu Messages postés 64 Date d'inscription dimanche 26 octobre 2008 Statut Membre Dernière intervention 22 novembre 2009 - 20 oct. 2009 à 11:17
 Jeannot - 16 nov. 2009 à 18:37
Bonjour,

J'ai un soucis avec mon code, j'ai mis deux éléments en float, l'un en float left pour qu'il s'aligne à gauche (il s'agit de mon menu), et l'autre en float right (il s'agit de la colonne droite ou se trouvera l'emplacement du texte sur ma page).

Problème, l'élément en float right, s'aligne en dessous de celui en float left, alors que moi je veux qu'il soit sur sa droite...

Un aperçu de mon code HTML :


<body>

<div id="banniere">

<a id="logo" href="index.html"><img id="logo" src="img/logo.png" height=119px width=329px/></a>

</div>

<div id="contenu">

<div id="menu">
<ul>
<li><a href="#">Qui sommes nous ?</a></li>
<li>Nos prestations :</li>

<li id="puce-orange"><a id="orange" href="#">Impression de documents</a></li>
<li id="puce-verte"><a id="vert" href="#">Communication extérieure</a></li>
<li id="puce-bleue"><a id="bleu" href="#">Communication intérieure</a></li>

<li><a href="#">Contacts</a></li>
<li><a href="#">La presse en parle</a></li>
<li>Pour télécharger notre<br> catalogue cliquez ici :<br> <a id="catalogue" href="#"><img id="catalogue" src="img/catalogue.png" height=61px width=83px/></a></li>

</ul>
</div>

<div id="droite">

<h2>Bienvenue...</h2>

<p>Pititititittila bla bla bla bla Bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla</p>

<h2>Titre...</h2>

<p>Bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla
</p>

</div>

</div>

<div id="pied"></div>

</body>
</html>


Et le code CSS :

* {
margin:0;
padding:0;
}

html {
background-color:#cecece;
text-align:center;
font-family:verdana, arial, sans-serif;
}

body {
margin:auto;
background-color:white;
width:950px;
}


/* ----------------------BANNIERE-------------------- */


div#banniere {
background:url(img/banniere.png) center bottom no-repeat;
height:203px;
}

img#logo {
float:left;
margin-top:9px;
margin-left:16px;
border:none;
}


/* ----------------------CONTENU------------------- */


div#contenu {
width:950px;
background-color:white;
display:inline;
}


/* ----------------------MENU-------------------- */

div#contenu div#menu {
width:181px;
background-color:#818485;
color:white;
text-align:left;
font-size:0.95em;
padding-top:20px;
padding-left:15px;
padding-bottom:15px;
}

div#contenu div#menu ul li{
list-style-type:none;
margin-bottom:30px;
}

a#orange {
color:#f7941e;
padding-left:25px;
font-size:0.9em;
background:url(img/puce-orange.png) no-repeat left top;
}

a#orange:hover{
text-decoration:underline;
background-position:3% 25%;
}

a#vert {
color:#b9d646;
padding-left:25px;
font-size:0.9em;
background:url(img/puce-verte.png) no-repeat left top;
}

a#vert:hover{
text-decoration:underline;
background-position:3% 25%;
}

a#bleu{
color:#4ac5eb;
padding-left:25px;
font-size:0.9em;
background:url(img/puce-bleue.png) no-repeat left top;
}

a#bleu:hover{
text-decoration:underline;
background-position:3% 25%;
}

a{
color:white;
text-decoration:none;
}

a:hover{
color:silver;
text-decoration:none;
}

img#catalogue {
border:none;
margin-top:10px;
margin-left:40px;
}


/* ----------------------PARTIE DROITE-------------------- */

div#droite {
text-align:left;
float:right;
width:700px;
color:#818485;
background-color:white;
padding:20px;
padding-top:0px;
}
h2 {
margin-bottom:20px;
margin-top:20px;
font-size:1em;
}

p {
font-size:0.9em;
}

Si quelqu'un à une solution. J'ai essayée plein de truc, display, clear, position, ect... mais je trouve pas la solution.

Merci d'avance,
Aurélie
A voir également:

2 réponses

kushiki Messages postés 13 Date d'inscription mercredi 21 octobre 2009 Statut Membre Dernière intervention 23 novembre 2009 1
21 oct. 2009 à 16:47
Bonjour,

dans ton code il te manque un 'float:left;' dans la partie css au niveau de ton menu.

Cordialement.
0
Salut, tu devrais trouver ton bonheur sur cette page : http://css.maxdesign.com.au/floatutorial/
0