<DIV> : Menu fixe mais contenu variable

Bonjour
J'essaye de créer une page avec une partie menu et une partie contenu à l'aide de <div>.
J'aimerai que seule la partie contenu s'adapte à la résolution, je n'ai pas envie de me retrouver avec un menu plus grand que nécessaire.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <div style="width:210px; float:left;"> mon menu ... ... ... </div> <div style="width:100%; float:left;"> mon contenu ... ... ... </div>
Le problème est que ma partie contenu passe en dessous du menu... Par contre si je lui mets une taille fixe tout va bien.

Comment faire pour que ma partie contenu se place correctement et s'adapte à la résolution?

Merci d'avance

pour le contenu : width:auto;

malheureusement ça fait pareil, le contenu se place sous le menu (sauf sous ie)

Ce que tu veux obtenir devrait ressembler à ça :

page.html

Code:

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
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<title>MENU et CONTENU</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<link href="page.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div id="global">
	<div id="menu">
		<h3>MENU</h3>
		<ul>
			<li><a href="#">Lien #1</a></li>
			<li><a href="#">Lien #2</a></li>
			<li><a href="#">Lien #3</a></li>
			<li><a href="#">Lien #4</a></li>
			<li><a href="#">Lien #5</a></li>
		</ul>
	</div>
	<div id="contenu">
		<h3>CONTENU</h3>
                <p>wdfysugdfugsubfjs afhi bsdbahj asbdddddfsdhbfsb jbfhhj fdsbhj sf hsbfsdbdbfdhbfh bhjdsjfidjfi idfi fjidfidjf ijdf fid ifj ijidf jfijidjfdjififjdij fid if ifjidjfid jif idfjidj fij dif idjfidijf idjfi idfjid jfidif idfj</p>
                <p>fjgijfidjg ij digjdi jgidf jgidf igdfjig idgij gjdfijgodjgfio ifdojg iodfjgiodjg iodgjiod giodfjiogjdi jgiodgj kodj giojdiogjdioj giogfiojd iogjdfioj gpskdofg ndhu9dugdo uiodf g djgudfhgui dfhugdfugnidfngjdn jdfj jignju dfnguid iug difgn dufjgn difngjdgn </p>
	</div>
</div>
 
</body>
</html>

page.css

Code:

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
body {
	margin: 0;
	padding: 0;
	text-align: center;
}
 
#global {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	text-align: left;
	background: #E6E6FA;
}
 
#menu {
	width: 210px;
	float: left;
	background: #E6E6FA;
}
 
#contenu {
	background: #FFFFF0;
	margin-left: 210px;
	padding: 0 10px 0 10px;
}
 
h3 {
	margin: 0;
}

J'ai ajouté un conteneur global pour la page. Ça fonctionne bien dans Firefox et Internet Explorer.

Merci beaucoup c'est exactement ça que je cherchais 8) :bravo: :bravo: :bravo: