28220 sujets

CSS et mise en forme, CSS3

[résolu] Placer 2 paragraphes texte côte à côte dans IE

Hello,

sans doute un problème tout bête, mais je vois pas. Sous Firefox tout va bien, sous IE le 2eme para est en dessous du 1er et pas à coté.

Le 1er para est flottant à gauche avec une largeur de 40%.
Lé 2ème n'est pas flottant avec une largeur de 60% et 40% de marge.

Voici le code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" /> 
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Language" content="fr" />
<title>Texte en colonne</title>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	div.boxtest { 
		width: 600px;
	  	background-color: #999;
	}
	
	p.c1 {
		width: 40%;
		float: left;
	}
	p.c2 {
		margin-left: 40%;
		width: 60%;
	}
</style>

</head>
<body>

<div class="boxtest"><p class="c1">Paragraphe flottant à gauche.</p>
<p class="c2">Ce paragraphe dont le texte est sensiblement plus long n'est pas flottant.</p>
</div>


</body>
</html>

Modifié par pat665 (28 Aug 2005 - 16:35)
Si tu enlèves les 40% de marge qui sont inutiles au deuxième paragraphe, je pense que ca devrait aller Smiley ravi
Non, la marge ne changera rien dans ce cas la.

Une méthode parmis d'autres : mettre les éléments en position: absolute.

Bonne après-midi.
Modérateur
bonjour,
essai d'appliquer une largeur de 59% (ou un margin-right:0; a la place d'indiquer une largeur au deuxieme bloc), plutot que 60%.
parceque pour IE 40+60 =100 n'est pas tout a fait vrai ! il a tendance a ajouter des pixels,(1px? +40%+3px(a cause de la propriete float)+60%= >100% !)
souvent 1 seul en marge a gauche. ce qui fait que ton 100, se trouve decallé et alors tu as le droit a une barre de scroll ou dans ton cas le 2eme paragraphe n'a pas assez d'espace pour se positionner et glisse en dessous tout logiquement.
par ailleurs, IE va aussi ajouter un decalage/marge d'environ 3 px, sur les coter de ton paragraphe en flottant.(grrr ce IE).
Ce bug est surement deja expliquer et documenter sur le web, mais je ne sais pas ou Smiley confused .

a plus
Merci de corriger le titre pour qu'il veuille dire quelque chose, ce pour faciliter les recherches futures et pour faciliter la lecture du forum.

Idem dans le topic, des para, je ne sais pas ce que c'est moi... Des para-militaires ?
Modifié par Olivier (28 Aug 2005 - 12:23)
Modérateur
rebonjour,
betement, et si tu enlever le css pour le 2eme paragraphe.. il viendrait en principe se positionner a droite du premier en float et occupper tout l'espace dispo, non !?

a plus

edit: et pour garder la marge :
p.c2 {
margin-left:40%;
}

fera l'affaire.
Modifié par gcyrillus (28 Aug 2005 - 12:37)
Sujet clos
Aller à