[résolu] Probleme de chevauchement de div : pixel et pourcentage

bonjour a tous,

jai un petit probleme, je vous explique.

je suis actuellement sur un site avec une image d'une largeur de 100px qui doit rester collé au coté gauche de la page , extensible en hauteur (dans un div). a coté de ce div , un autre div , qui contiendra le contenu de la page doit , lui , prendre toute la largeur restante de la page .

jai procédé comme cela :

<div id="conteneur">
   <div id="partie_gauche">
   </div>
   <div id="partie_droite">
   </div>
</div>


#partie_gauche
{
width:100px;
height:100%;
float:left;
background-color:blue;
}

#partie_droite
{
width:100%;
height:100%;
background-color:red;
}

le probleme , c'est que la partie gauche chevauche la partie droite alors que je voudrais que les 2 parties soit vraiment cote a cote et pas l'une par dessus l'autre.

merci d'avance pour votre aide!
Modifié par lolo51 (21 Jan 2009 - 12:08)

Bonjour,

Chevaucher, n'est pas le mot que j'aurais employé. Mais ton code fait actuellement exactement ce que tu lui dit de faire, la partie rouge prend 100% de la taille de l'écran.

Enlève le width: 100% de partie droite, celà devrait règler ton problème.

a noté qu'en utilisant la syntaxe suivante

#partie_gauche

{

[b]width:10%;[/b]

height:100%;

float:left;

background-color:blue;

}



#partie_droite

{

[b]width:90%[/b]

height:100%;

background-color:red;

}

les 2 divs sont bien cote a cote sans se chevaucher, mais cela ne me convien pas puisque mon div de gauche doit obligatoirement faire 100 pixel.

Relis mieux mon précédent message -_-

laisse le 100px de large à partie gauche et ne met rien à partie droite.

Un div prend, de base, toute la place disponible.

merci pour ta contribution yasashii

malheureusement , en retirant le width:100% , le résultat est identique.

et désolé pour le Second post , mais je l'ai écris en meme temp que toi , je n'avais donc pas ta premiere reponse ^^

a écrit :
les 2 divs sont bien cote a cote sans se chevaucher

Uniquement dans Internet Explorer 6 et 7, et à cause d'un fonctionnement non standard (corrigé dans IE8).

Un peu de lecture (attentive):
Un design fluide avec trois «colonnes», grâce au positionnement flottant.
Retire une colonne (celle de droite), et tu y es.

Merci pour vos réponse !

alors tout d'abord :

a écrit :
Uniquement dans Internet Explorer 6 et 7, et à cause d'un fonctionnement non standard (corrigé dans IE8). ohwell

j'utilise firefox 3.0.5 et ca marche quand meme

jai trouver la réponse ma question grace a vous 2 !
la solution :

supprimer le width:100% comme Yasashii me l'avais conseillé , et rajouter , tout simplement : margin-left:100px sur le div de droite .

le résultat etait sur Alsacréation , mais je l'avais pas vu (honte sur moi)

le voila

merci a vous 2 pour m'avoir sorti du pétrin !
Modifié par lolo51 (21 Jan 2009 - 14:24)