Ajuster la largeur d'un bloc à l'écran

Fermé
jemsss Messages postés 189 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 28 novembre 2019 - 2 avril 2009 à 09:31
Bonjour,
Je suis entrain de créer ma première page web avec CSS. Je souhaite que la taille de la partie centrale de ma page s'ajuste selon la largeur de l'écran mais que la taille de mes blocs de droite et de gauche reste fixe.
Voici mon problème avec les scripts ci-dessous. Quand je diminue la largeur de ma fenêtre en dessous de 900px :
- avec Firefox, mon bloc flottant de droite se superpose à la partie centrale.
- Avec IE, la partie centrale descend en dessous de mes blocs flottants.
Que faire pour que ça marche ???

Merci d'avance !!




Code : PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<title>help</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="help.css" />
	</head>
	<body>
		<div id="entete">
			<p>entête</p>
		</div>
		<div id="colonne_gauche">
			<div id="menu">
				<p>menu</p>
			</div>
			<div id="langue">
				<p>langue</p>
			</div>
			<div id="compteurs">
				<p>compteurs</p>
			</div>
		</div>
		<div id="pub">
			<p>pub</p>
		</div>
		<div id="partie_centrale" >	
			<p>contenu de la page</p>
		</div>
		<div id="pied_page">
			<p>pied de page</p>
		</div>
	</body>
</html>



Code : CSS

body
{
	width: 100%; 
	margin: auto;
	margin-bottom: 20px;
	background-color: #ffff99;
	text-align: center;
}
#entete
{
	width: 900px;
	height: 100px;
	margin: auto;
	border-style: solid;
	border-width: 1px;
}
#colonne_gauche
{
	float: left;
	width: 170px;
	padding: 0px;
}
#menu
{
	width: 160px;
	height: 600px;
	margin: 5px;
	border-style: solid;
	border-width: 1px;
}
#langue
{
	width: 160px;
	height: 40px;
	margin: 5px;
	border-style: solid;
	border-width: 1px;
}
#compteurs
{
	width: 160px;
	height: 40px;
	margin: 5px;
	border-style: solid;
	border-width: 1px;
}
#partie_centrale
{
	margin-left: 180px;
	margin-right: 180px;
	margin-top: 5px;
	min-width: 540px;
	min-height: 800px;
	padding: 0px;
	border-style: solid;
	border-width: 1px;
	background-color: #ffffff;
}
#pub
{
	width: 160px;
	height: 600px;
	float: right;
	margin: 5px;
	border-style: solid;
	border-width: 1px;
}
#pied_page
{
	margin-top: 5px;
	text-align: center;
	border-style: solid;
	border-width: 1px;
}
A voir également: