Probleme Float CSS

Résolu
Patachouuu Messages postés 64 Date d'inscription   Statut Membre Dernière intervention   -  
 klima servisi -
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

4 réponses

Réponse 1 / 4
kartnia Messages postés 27 Date d'inscription   Statut Membre Dernière intervention   5
 
Bonjour,
essaye de mettre : div#droite {float:left;}
0
Patachouuu Messages postés 64 Date d'inscription   Statut Membre Dernière intervention  
 
J'ai essayée, le div droite se met à flotter à gauche, en dessous du div menu.
Donc ça marche pas, je sais pas pourquoi, mais le div droite ne veut pas passer à côté du div menu. Pourtant j'ai suffisamment de largeur pour qu'il passe...
0
Réponse 2 / 4
kartnia Messages postés 27 Date d'inscription   Statut Membre Dernière intervention   5
 
Je viens de remarquer que ta div#menu est pas en float:left
En fait il faut que ton div droite + ton div menu soient en float:left.
0
Patachouuu Messages postés 64 Date d'inscription   Statut Membre Dernière intervention  
 
Exacte ! Ça marche !
J'ai tellement galérée sur un autre soucis, que j'ai finis par retirer des trucs qui étaient nécessaire sans m'en apercevoir !

Mon autre soucis, c'est que je voudrais que le bas du div menu et le bas de mon div droit soit toujours bien aligné, sans avoir a préciser de hauteur. Et que cela s'adapte selon mon contenu (je veux pas avoir à changer les hauteurs de mes div à chaque nouvelles pages) qui changera au niveau de la colonne droite, mais qui devrait rester le même au niveau du menu.

Comment faire ?
J'ai essayée de faire ça avec des positions absolue et relative (je sais pas si ça a vraiment un rapport avec ce que je veux faire), mais ça me déforme ma mise en page plutôt qu'autre chose...
0
Réponse 3 / 4
monkey_monk Messages postés 641 Date d'inscription   Statut Membre Dernière intervention   131
 
Petite ressource vraiment utile pour la question des float :

https://www.smashingmagazine.com/2009/10/the-mystery-of-css-float-property/

https://www.smashingmagazine.com/2007/05/css-float-theory-things-you-should-know/

Bon travail ! :D
0
Patachouuu Messages postés 64 Date d'inscription   Statut Membre Dernière intervention  
 
Ouch de l'Anglais ! Cela sera surement utile à d'autre, mais moi je suis pas très amie avec les langues étrangères, trop compliqué. ^^

Merci quand même pour les liens.
0
Réponse 4 / 4
klima servisi
 
I always follow your site thank you wish you continued success https://www.hugedomains.com/domain_profile.cfm?d=sunnyservisi&e=com
0

Discussions similaires

Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
indice et exposant en css ?
yiv -
Kitkatryne -

19 réponses
Enlever trait sous un lien href
ponpon17430 -
trucmachinchose-rose -

30 réponses
CSS/Comment enlever couleur liens ?
alexou1984 -
Tonio -

6 réponses
Background color css
ernblp -
ernblp -

5 réponses