Espacement entre 2 divs + div flottant

**baggie** · 23/07/2012, 14h55

Bonjour

Je reviens vers vous car j'ai un problème au niveau CSS sous Internet Explorer (version 8 testée).

J'ai un div contenant mon header, en dessous un autre div contenant mon menu principal, et en dessous un troisième div contenant une image de fond.
Les trois font la même largeur et sont l'un en dessous de l'autre.
Comme vous le voyez sur le screen joint à ce message, j'ai un espace (cadre orange) qui s'est créé entre mon menu principal et mon troisième div. Bien sûr, j'aimerai que mon menu et mon troisième div soient collés l'un à l'autre.

Mon second problème concerne un positionnement. Sur mon screen vous voyez des petits drapeaux sur la droite. En fait, je souhaite que le div contenant ces drapeaux soit collé à l'extérieur de mon div "contenu", en haut à droite. Sur mon screen, le div est bien positionné, sauf que le code qui va avec ne convient pas car je suis en position: absolute (et dès qu'on redimensionne la fenêtre ben mon div n'est plus collé à droite du contenu).

Voici tout d'abord le code HTML :
> div #menu : menu principal
> div #submenu : troisième div qui devrait se coller au menu
> div .lang-menu : div qui doit être collé au contenu principal "content" mais sur la droite et à l'extérieur de la colonne de contenu

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
 
<div id="wrapper" class="center_content">
	<!-- header -->
	<div id="header"></div>
	<div style="clear: both;"></div>
	<div id="menu">
		<div id="menu_txt">
			<a href="..."><img src="images/btn_home.png" /></a>
			<ul>
				<li>Présentation</li>
				<li>Recherche</li>
			</ul>
		</div>
		<div id="recherche">
<!-- un champ input et un bouton submit -->
		</div>
	</div>
        <div style="clear: both;"></div>
	<div id="submenu"></div>
	<div style="clear: both;"></div>
	<!-- Fin header -->
	<div class="lang-menu">
		<a href="" class="langfr">FR</a><br />
		<a href="" class="languk">UK</a><br />
		<a href="" class="langde">DE</a>
	</div>
	<div id="content">
		<div id="main_content">Left</div>
		<div id="right_content">right</div>
	</div>
	<div style="clear: both;"></div>
	<!-- Fin contenu -->
	<div id="footer">
		<ul>
		</ul>
	</div>
</div>

Ma CSS :

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
 
#wrapper div {
	text-align: left;
	margin: 0 auto;
}
 
#header {
	background: url('images/bandeau_top.png') no-repeat;
	width: 1022px;
	height: 149px;
}
 
#menu {
	width: 1022px;
	background: url('images/bandeau_menu4.png') repeat-x;
	height: 34px;
}
 
#submenu {
	background: url('images/bandeau_bottom.png') no-repeat;
	width: 1022px;
	height: 21px;
}
 
#content {
	background: url('images/bg_white.jpg') repeat-y;
	width: 982px;
	overflow: auto;
}
 
#main_content {
	float: left;
	width: 660px;
	background: #FFF;
	padding: 0 19px;
}
 
#right_content {
	float: left;
	width: 242px;
	background: #FFF;
	padding: 0 0 0 20px;
}
 
.lang-menu {
	position: absolute;
	right: 122px;
	top: 215px;
}
 
.lang-menu img {
	margin-bottom: 3px;
}