2 Divs de largeur 50% à 100% de la page

**drazielus** · 26/03/2007, 17h43

Bonjour,

J'ai un petit soucis de mise en forme avec des divs avec une mise en page à 100% de largeur.

Ceci est juste une page de test, qui fonctionne bien sous Firefox mais pas sur IE.
Donc je mets le code ici, pour tester céer une page et copier ce code dedans et dites moi s'il y a une solution pour que ce qui fonctionne sur Firefox puisse fonctionner sur IE aussi.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/transitionnal.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Untitled Document</title>
	</head>
	<body style="margin:0px;padding:0px;">
		<div style="float:right;background:#ccff00;width:300px;">droite</div>
		<div style="margin-right:320px;margin-left:10px;">
			<div style="float:left;padding:0px;margin:0px;width:50%;background:#cc0000;">gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche</div>
			<div style="margin:0px;padding:0px;margin-left:50%;background:#ffcc00;">centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre centre</div>
			<div style="clear:both;"></div>
		</div>
	</body>
</html>

Merci

**Candygirl** · 26/03/2007, 18h48

Hello,

Envoyé par drazielus

Ceci est juste une page de test, qui fonctionne bien sous Firefox mais pas sur IE.

Si tu décrivais un peu ton problème ? Tout le monde n'a pas forcément IE d'installé et tester peut prendre plus de temps que si tu décris exactement ton souci. Sur quelle version d'IE ?

En regardant ton source il me semble que tu vas être confronté à 2 problèmes:

- l'arrondi mathématique des % sur IE
- le bug des 3px sur IE6

Le premier problème peut être règlé en attribuant un width de 49.99% uniquement pour IE à l'un des div. De cette manière, lors d'un nombre impaire de pixels, on évite que les 2 fractions x.5 arrondies au nombre supérieur ne donnent ensemble un pixel de trop qui fait passer le 2ème div en-dessous du premier.

Pour le 2ème, il suffit de positionner le 2ème div en float plutôt qu'avec un margin.

2 Divs de largeur 50% à 100% de la page

Dimensionnement en CSS

Discussions similaires

Partager

Partager