28220 sujets

CSS et mise en forme, CSS3

[Resolu] Mise en page : 2 blocs côte à côte et 2 autres en dessous

Bonjour,

Je cherche à réaliser une mise en page spécifique :

- deux blocs côte à côte sur une ligne
- puis deux autres blocs côte à côte sur une seconde ligne

Voici mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>4 blocs</title>
<style type="text/css">
<!--
body, h1, p {
	margin:0;
	padding:0;
}
.prodGauche, .prodDroite {
	background-color:#FFFF99;
	border:solid 1px #000033;
	width:300px;
}
.prodGauche {
	float:left;
	clear:left;
}
.prodDroite {
	clear:right;
}
-->
</style>
</head>
<body>
<div class="prodGauche">
  <h1>Bloc 1</h1>
  <p>Contenu du bloc 1 </p>
</div>
<div class="prodDroite">
  <h1>Bloc 2</h1>
  <p>Contenu du bloc 2 </p>
</div>
<div class="prodGauche">
  <h1>Bloc 3</h1>
  <p>Contenu du bloc 3 </p>
</div>
<div class="prodDroite">
  <h1>Bloc 4</h1>
  <p>Contenu du bloc 4 </p>
</div>
</body>
</html>


Sous IE5 et IE6 : la mise en page est correcte mais il y a pourtant un espace à droite des blocs

Sous Firefox : les 2 blocs ne sont pas côte à côte

Quelle est mon erreur ?
Est-ce qu'il existe une meilleur solution ?

Merci pour votre aide.
Modifié par tannoy (20 Jul 2005 - 15:34)
Le problème avec le float:left sur le bloc de droite, c'est que dans IE6 ça ne fonctionne pas. Par contre, c'est ok pour IE5 et Firefox.

Je vous joins les copies d'écrans.

Existe-il un autre moyen universel ou bien est-ce une limite ou faut-il passer par un hack pour IE6 ?

Merci de votre aide

IE6 Smiley fache
upload/1132-ie6.gif

IE5 Smiley smile
upload/1132-ie5.gif

Firefox Smiley biggrin
upload/1132-firefox.gif
Merci beaucoup.

Si je résume, le clear:both permet au bloc gauche de ne pas se situer à côté d'un autre bloc flottant.
Ce qui veut donc dire que le bloc 3 ne peut pas se situer à côté du bloc 1 mais pourquoi le bloc 4 lui cette fois-ci reste bien au contact du bloc 3.

Désolé pour ma curiosité et encore merci puisque ça fonctionne partout.
Réponse peu technique :

quand on indique clear:both; ca annule complètement l'effet du float qui précède. Disons que ça remet les pendules à zéro Smiley biggrin .

Sinon n'oublie pas d'éditer ton titre de sujet pour ajouter la mention "Résolu"

++
Non non très bonne réponse.

C'est logique tout ça, le clear:both du bloc 3 annule le float du bloc 1 ce qui empêche le bloc 4 de flotter ailleurs qu'à côté du bloc 3.

Merci à tous pour votre aide

Smiley biggrin
Sujet clos
Aller à