Discussion :

[Kanagawa]

Bonjour

J'ai une mise en page en CSS qui se présente différemment sous I.E et Firefox. Le plus simple est de faire un schéma, voir les images en pièces jointes.

Le résultat souhaité est celui qui fonctionne sous I.E. Est-il possible de l'obtenir également sous Firefox sans avoir à rajouter des DIV imbriqués ?

Voici le code auqel sa correspond:

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
div#news {
	width:400px;
	float: left; 
	margin-right: auto;
	margin-left: 20px;
	background-color: #FF0000;
}
 
div#forum {
	width:350px;
	float: right; 
	margin-left: auto;
	margin-right: 20px;
	background-color: #00ff06;
}
 
div#newsletter {
	width:400px;
	float: right; 
	margin-right: 20px;
	background-color: #ff9c00;
}
 
div#video {
	width:400px;
	clear: left; 
	float: left; 
	margin-right: auto;
	margin-left: 20px;
	background-color: #d85962;
}

et

Code :

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

1
2
3
4
5
6
7
 
<div id="contenu">
  <div id="news">NEWS</div>
  <div id="forum">FORUM</div>
  <div id="video">VIDEO</div>
  <div id="newsletter">NEWSLETTER</div>
</div>

[GihefBey]

Bonjour,

Essaye en plaçant tes blocs dans des colonnes.
Il faudra en changer l'ordre.

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <div id="contenu">
 
    <div id="gauche">
      <div id="news">NEWS</div>
      <div id="video">VIDEO<br>VIDEO<br>VIDEO</div>
    </div>
 
    <div id="droite">
      <div id="forum">FORUM<br>FORUM<br>FORUM</div>
      <div id="newsletter">NEWSLETTER</div>
    </div>
 
    <div class="separ"></div>
  </div>

Code css :

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
#gauche {
  float: left; 
  width: 400px;
  margin-left: 20px;
  }
#droite {
  float: right; 
  width: 400px;
  margin-right: 20px;
  }
 
#news {
  background-color: #FF0000;
  }
#forum {
  background-color: #00ff06;
  }
#newsletter {
  background-color: #ff9c00;
  }
#video {
  background-color: #d85962;
  }
 
.separ {
  clear : both;
  }

Ou en enlevant ton clear : left;

-