Positions de deux div sur la même ligne

**kabkab** · 18/06/2008, 13h10

Bonjour,
Difficile de trouver un titre pour résumer mon problème.

Mon code est celui-ci :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	margin-left: 2px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #FFFFFF;
}
#milieu {width: 780px;}
#gauche {float:left;width:120px;margin-top:2px;}
#centre {float:left;width:478px; margin: 4px;}	
#droite {float:right;width:170px;}	
.art_un {width: 100%;vertical-align: top;margin: 0px;padding: 0px;}
.art_deux {
	width: 230px;
	float: left;
	margin-top: 15px;
	margin-bottom: 2px;
	clear: both;
	display: block;
	background-color: #FFFFCC;
}
.art_deux_2 {
	width: 230px;
	float: right;
	display: block;
	margin-top: 15px;
	margin-bottom: 2px;
	background-color: #FFCCCC;
}
-->
</style>
</head>
<body>
<div id="milieu">
  <div id="gauche">Un menu &agrave; gauche</div>   <!-- gauche -->
  <div id="droite">Un menu &agrave; droite</div>   <!-- droite -->
  <div id="centre">
    <div class="art_un"> Un article important qui prend toute la largeur du div milieu pour annoncer une ouverture</div>     <!-- class art_un -->
    <div class="art_deux"> Un article qui prend la moiti&eacute; &agrave; gauche premi&egrave;re ligne
      j'ajoute du bla bla bla bla </div>     <!-- class art_deux  ligne 1-->
    <div class="art_deux_2"> Un article qui prend la moiti&eacute; &agrave; droite premi&egrave;re ligne </div>     <!-- class art_deux_2 ligne 1-->
    <div class="art_deux"> Un article qui prend la moiti&eacute; &agrave; gauche deuxi&egrave;me ligne </div>    <!-- class art_deux  ligne 2-->
    <div class="art_deux_2"> Un article qui prend la moiti&eacute; &agrave; droite deuxi&egrave;me ligne j'ajoute du bla bla bla bla bla bla bla </div>    <!-- class art_deux_2  ligne 2-->
  </div>   <!-- centre -->
</div> <!-- milieu -->
</body>
</html>

Avec IE (6), j'obtiens des blocs l'un sous l'autre sans espaces supplémentaires, tandis qu'avec FF (2) et Opéra (9.25) mes blocs jaunes sont alignés avec les blocs roses.
Pour une fois, IE me donne le résultat que je voulais comparativement aux autres. Donc, je voudrais que FF et Opéra m'affichent mon résultat comme IE : blocs jaunes et blocs roses non alignés.
Je viens de penser à faire deux div l'un pour les jaunes et l'autre pour les roses mais ça me créerait un problème pour l'ordre :
Premier article => Première ligne case jaune.
Deuxième article => Première ligne case rose.
Troisième article => Deuxième ligne case jaune, etc.

Ne me dites pas de travailler avec des <table> parce que justement je suis en train de refaire mon site de façon à ne le gérer qu'avec des CSS. Que c'est difficile de gérer les incompatibilités!

**romain_ci** · 18/06/2008, 14h19

Salut

Jte donne une petite piste !
Utilise les Positions Absolute ou Relative !

**kabkab** · 18/06/2008, 14h44

Bonjour,
J'ai pensé aux positions mais je ne peux pas gérer les absolute vu que c'est un site dynamique et que les dites boîtes sont appellées à avoir des hauteurs différentes.

**romain_ci** · 18/06/2008, 14h54

je voi pas ce que tu veut alors !!
Mais perso je voi pa le pb si elle on des tailles diferentes

**frog43** · 18/06/2008, 14h59

Salut,
moi aussi j'ai un peu de mal à comprendre ...

**kabkab** · 18/06/2008, 15h08

Bonjour,
romain_ci, as-tu essayé mon code sur IE, FF et Opéra? Si c'est le cas tu verrais les différences au niveau des espacements (verticaux) entre les boîtes de même couleur. Et c'est la version IE qui m'intéresses.

**romain_ci** · 18/06/2008, 15h22

ookk okk !! je vois mieu ce qui va pas en fait !

IE interprete mal ton code en faite... c'est FF qui a raison !

Mais en mm temp vu le resultat de ce que tu veut, test de faire deux block :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div> // un conteneur
   <div> // un conteneur Gauche    css : float:left
       tes div jaunes
   </div>
 
   <div>// un conteneur Droit        css : float:left
      tes div roses
   </div>
 
</div>

essay avec une structure comme ca

**kabkab** · 18/06/2008, 16h19

Bonjour,

Euh, j'avais déjà cité dans mon premier message :

Je viens de penser à faire deux div l'un pour les jaunes et l'autre pour les roses mais ça me créerait un problème pour l'ordre :
Premier article => Première ligne case jaune.
Deuxième article => Première ligne case rose.
Troisième article => Deuxième ligne case jaune, etc.

Positions de deux div sur la même ligne

Positionnement en CSS

Discussions similaires

Partager

Partager