28173 sujets

CSS et mise en forme, CSS3

[Non-Résolu] Flotants dans un div qui ne fait pas 100% de largeur

Salut,

Voilà un nouveau problème avec les flottant, et avec internet explorer Smiley lol

J'ai donc un conteneur de X% de large, et je souhaite y diposer à l'interieur, deux cadres flottants, ca donne ca :

a écrit :
<div style="background-color:#F9B45E;width:80%;margin:0 10px;">
test
<div style="float:left;width:50%;background:#D3D3D3;">
test
</div>

<div style="float:left;width:50%;background:#D3D3D3;">
test
</div>
</div>


Sous Firefox, les deux cadres sont bien côtes à côte, en revanche, sous IE6, il se mettent l'un en dessous de l'autre Smiley decu ...

Auriez vous une idée ? merci d'avance !
Modifié par vin-moi (10 Apr 2007 - 14:58)
Bonjour,

Il n'y a pas de raison que cela ne marche pas (je viens de tester sous IE6) sauf si tu ne nous montres pas tout. Le mieux c'est de nous mettre l'exemple en ligne que nous constations le problème.
Bonjour,

C'est juste qu'IE à un problème concernant les calculs d'arrondis, Suivant la définition de la page, 50% +50% donnera plus de 100% et donc ton 2éme bloc passera "dessous" ...

Une solution "moche" un bloc à 49.99% pour ie6 en commentaire conditionnel !

moins moche
<div style="background-color:#F9B45E;width:80%;margin:0 10px;">
test
<div style="float:left;width:50%;background:#D3D3D3;">
test
</div>
<div style="margin-left: 50%;background:lime;">
test
</div>
</div>

Modifié par ghost (10 Apr 2007 - 14:26)
Salut et merci pour vos messages Smiley lol

Alors après test, en fait il suffit de supprimer les margin et padding de body et ca fonctionne, mais comme vous l'avez devinez, ce n'est pas le but de la manoeuvre, c'etait qu'un test qui ne résoud pas vraiment mon soucis Smiley decu

Alors voilà :

L'objectif est d'avoir une interface en "2" colonnes décomposées comme cela :

Tout d'abord un div "cdroite" de 20% de large en float:right pour la colonne de gauche qui ne contient qu'un seul cadre.

Ensuite, donc un div normal de 80% de large qui contient des cadres flottant à gauche soit de 50% de largeur (à ce moment yen a deux cote à cote) , soit de 100% de largeur.

Sous Firefox : aucun soucis !

Sous IE:

Problème 1 : la partie de gauche se met en dessous de celui de droite, mais ca c'est pas grave je crois savoir d'ou ca viens.

PRoblème 2 : Celui que je souhaite résoudres : les cadres qui sont en float:left et à 50% de largeur se mettent l'un en dessous de l'autre ! Si l'on règle la largeur à 49%, ca passe niquel mais bon ...

En esperant que vous pourrez m'aider, merci !
Modifié par vin-moi (10 Apr 2007 - 14:49)
Tu as trouvé la réponse tout seul, et effectivement, dans mon test à moi, je met toujours margin et padding à 0 :

* {
    margin:0;
    padding:0;
}


Compte tenu du fait que les éléments ont des marges différentes selon les navigateurs, cela met tout le monde d'accord. Je n'ai plus qu'à ajouter des marges à mes éléments quand j'en ai besoin.

Résolu ? -> [Résolu]
Héhé bien joué zzzazzz !

le margin et padding à 0 pour tous les éléments règle mon soucis !

Merci beaucoup à vous deux !!
Euh faut espoir Smiley lol

J'ai appliqué les 49.999% au div au lieu de 50% et en meme tant le margin et padding à 0, mais c'est bien le fait d'avoir mis une largeur de 49.999% au petites cadres qui a "réglé" le soucis, mais effectivement ce n'est pas très propre Smiley decu
Re,

Pour une idée
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
			
<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <style type="text/css">
  *{margin: 0; padding: 0;}
   
 #conteneur{
	border: 1px solid black;
	overflow: hidden;
	
}
#droite{
	width: 20%;
	float: right;
	background: yellow;

}

#gauche{
	background: red;
	overflow: hidden;
	height: 1%;
}	

#gauche1{
	float: left;
	width: 49%;
	background: lime;
	
}

#gauche2{
	margin-left: 51%;
	background: orange;
	
}

#bloc_gauche1{
	width: 95%;
	margin: auto;
	background: blue;
	color: white;
	
}

#bloc_gauche2{
	width: 95%;
	margin: auto;
	background: green;
	color: white;
	border: 1px solid black;
}

#centre{
	clear: left;
	width: 98%;
	margin: 20px auto;
	background: #bdbdbd;
	color: white;
	border: 1px solid black;
}

h1{
	font-size: 0.9em;
}

p{
	margin: 0 15px 0 15px
}
  </style>
 
</head>
<body>
<div id="conteneur">
	<div id="droite">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam et ipsum. Suspendisse nec dolor ac ligula ullamcorper sagittis. Pellentesque ornare ligula sed nibh. Maecenas ullamcorper nibh non lectus. Quisque cursus enim in dui.
		</p>
	</div>
	<div id="gauche">
	 	<div id="gauche1">
			<h1>Lorem ipsum</h1>
			<div id="bloc_gauche1">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam et ipsum. Suspendisse nec dolor ac ligula ullamcorper sagittis. Pellentesque ornare ligula sed nibh. Maecenas ullamcorper nibh non lectus. Quisque cursus enim in dui. Cras viverra tortor nec ligula. Maecenas ultrices risus id felis. Fusce porttitor. Nunc vel diam ut lacus condimentum lobortis. Praesent elit massa, consequat in, elementum nec, interdum eu, purus. Nam mattis urna a mi dictum fringilla. In egestas blandit eros. Sed iaculis lorem ac orci. Vestibulum vel urna eu arcu luctus laoreet. Sed blandit, metus at mollis porttitor, nulla eros feugiat velit, sit amet facilisis massa nisi vel erat. Integer sodales velit tincidunt neque.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam et ipsum. Suspendisse nec dolor ac ligula ullamcorper sagittis. Pellentesque ornare ligula sed nibh. Maecenas ullamcorper nibh non lectus. Quisque cursus enim in dui. Cras viverra tortor nec ligula. Maecenas ultrices risus id felis. Fusce porttitor. Nunc vel diam ut lacus condimentum lobortis. Praesent elit massa, consequat in, elementum nec, interdum eu, purus. Nam mattis urna a mi dictum fringilla. In egestas blandit eros. Sed iaculis lorem ac orci. Vestibulum vel urna eu arcu luctus laoreet. Sed blandit, metus at mollis porttitor, nulla eros feugiat velit, sit amet facilisis massa nisi vel erat.
			</p>
			</div>
		</div>
	 	<div id="gauche2">
		<h1>Lorem ipsum</h1>
			<div id="bloc_gauche2">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam et ipsum. Suspendisse nec dolor ac ligula ullamcorper sagittis. Pellentesque ornare ligula sed nibh. Maecenas ullamcorper nibh non lectus. Quisque cursus enim in dui. Cras viverra tortor nec ligula. Maecenas ultrices risus id felis. Fusce porttitor.
			</p> 
			</div> 
			<h1>Lorem ipsum</h1>			
			<div id="bloc_gauche2">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam et ipsum. Suspendisse nec dolor ac ligula ullamcorper sagittis. Pellentesque ornare ligula sed nibh. Maecenas ullamcorper nibh non lectus. Quisque cursus enim in dui. Cras viverra tortor nec ligula. Maecenas ultrices risus id felis. Fusce porttitor.
			</p> 
			</div>
			<h1>Lorem ipsum</h1>			
			<div id="bloc_gauche2">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam et ipsum. Suspendisse nec dolor ac ligula ullamcorper sagittis. Pellentesque ornare ligula sed nibh. Maecenas ullamcorper nibh non lectus. Quisque cursus enim in dui. Cras viverra tortor nec ligula. Maecenas ultrices risus id felis. Fusce porttitor.
			</p> 
			</div>
			<h1>Lorem ipsum</h1>			
			<div id="bloc_gauche2">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam et ipsum. Suspendisse nec dolor ac ligula ullamcorper sagittis. Pellentesque ornare ligula sed nibh. Maecenas ullamcorper nibh non lectus. Quisque cursus enim in dui. Cras viverra tortor nec ligula. Maecenas ultrices risus id felis. Fusce porttitor.
			</p> 
			</div>
		</div>
		<div id="centre"> 
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam et ipsum. Suspendisse nec dolor ac ligula ullamcorper sagittis. Pellentesque ornare ligula sed nibh. Maecenas ullamcorper nibh non lectus. Quisque cursus enim in dui. Cras viverra tortor nec ligula. Maecenas ultrices risus id felis. Fusce porttitor.
			</p>
		</div>	
	</div>

	



</div>
</body>
</html>
Ne pas mettre deux flottants, mais un seul. Pour mettre deux blocs côte-à-côte, un seul flottant est nécessaire. Le second sera placé avec une marge latérale ou un contexte de formatage, par exemple.
Sujet clos
Aller à