28173 sujets

CSS et mise en forme, CSS3

Salut!

J'ai un bloc placé en position:absolute avec des propriétés left, top et right spécifiées.

Dans celui-ci je veux mettre deux blocs avec une taille relative à ce bloc mais avec un espace entre les blocs.

J'ai donc mis la dimension du bloc de gauche à 70% et celle du bloc de droite à 25%. Tout fonctionne parfaitement sur Firefox et Opera, mais sur IE le % semble être celui des blocs par rapport à la largeur de la page plutôt que par rapport au bloc parent comme ce devrait être le cas.

Voici le résultat obtenu selon les navigateurs:

Firefox/Opera

http://qc-net.com/relativeff.jpg

Internet Explorer

http://qc-net.com/relativeie.jpg


Code xHTML


<div id="conteneur">
<div id="gauche">Blabla</div>
<div id="droit">Blabla</div>
</div>


Code CSS


* {margin:0;padding:0}

#conteneur
{
position: absolute;
top: 20px;
left: 20px;
right: 20px;
}

#gauche
{
float: left;
width: 75%;
}

#droit
{
float: right;
width: 20%;
}


Sur les images, #conteneur est la bordure verte, #gauche est le bloc bleu et #droit est le bloc rouge.

J'ai trouvé ça mais même dans IE il y a des problèmes d'affichage avec l'exemple: http://www.satzansatz.de/cssd/tmp/apboxpercentagewidth.html

Merci d'avance pour votre aide.
Modifié par mathieumg (15 Jul 2006 - 08:25)
a écrit :
la solution la plus simple consiste à veiller à attribuer une largeur fixe (en pixels ou en pourcentages) à l'élément parent ;


C'est ce que j'ai fait et ça semble fonctionner correctement à priori, merci beaucoup!
Bonjour Mathieu,

Avec Internet Explorer 5 et 6 il n'est pas possible de donner une largeur à un élément positionné de manière absolue uniquement par "left" et "right".

Dans ce cas il suffirait de ne plus positionner le conteneur (ou uniquement en position relative) et de lui donner les marges voulues. Ce qui permettrait notamment d'éviter le bug indiqué par Mpop.

Ps: si tu considères le problème comme réglé, n'oublie pas d'insérer [résolu] dans le titre du sujet, merci Smiley cligne