28172 sujets

CSS et mise en forme, CSS3

DIVs qui prennent toute la largeur restante d'une page

Bonjour à tous,

Je bloque sur une truc, j'arrive pas à trouver de solution.
J'ai trois DIVs alignés horizontalement. Le DIV central a une largeur bien précise. J'aimerai que la largeur des DIVs de chaque côté prenne la place restante.

Voici le code que j'utilise pour le moment, pour faire mes tests:

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<TITLE></TITLE>
<STYLE>
* {
	margin: 0;
	padding: 0;
}
#container {
	background-color: #EEEEEE;
	height: 400px;
}
#colonne_gauche {
	background-color: #DDDDDD;
	height: 100px;
	width: auto;
	display: inline-block;
}
#contenu {
	background-color: #CCCCCC;
	height: 200px;
	width: 500px;
	display: inline-block;
}
#colonne_droite {
	background-color: #BBBBBB;
	height: 300px;
	width: auto;
	display: inline-block;
}
</STYLE>
</HEAD>
<BODY>
<div id="container">
	<div id="colonne_gauche">Gauche</div>
	<div id="contenu">CENTRE</div>
	<div id="colonne_droite">Droite</div>
</div>
</BODY>
</HTML>


Donc j'aimerai que 'colonne_gauche' et 'colonne_droite' s'ajuste automatiquement. Pour le moment elles sont de la largeur de leur contenu.

Merci d'avance pour vos lumières.
Modifié par jdeheyn (12 Jan 2013 - 02:51)
Salut,

Je n'ai pas trouvé de solution en CSS (ce qui ne veut pas dire qu'il n'y en a pas Smiley confused ).

J'ai donc utilisé un peu de javascript. J'ai supprimé les inline-block et j'ai utilisé des flottants pour les colonnes. De même, pour centrer la zone de contenu, j'ai utilisé un margin: 0 auto.

Voici ce que ça donne (testé sous Chrome et FF, il faut approfondir les tests si tu veux utiliser ça):
<!doctype html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<TITLE></TITLE>
<STYLE>
* {
	margin: 0;
	padding: 0;
}
#container {
	background-color: #EEEEEE;
	height: 400px;
}
#colonne_gauche {
	background-color: #DDDDDD;
	height: 100px;
	float:left;
}
#contenu {
	background-color: #CCCCCC;
	height: 200px;
	width: 500px;
	margin:0 auto;
}
#colonne_droite {
	background-color: #BBBBBB;
	height: 300px;
	float:right;
}
</STYLE>
<script type="text/javascript">
	function resizeColonnes(){
		var largeurPage = window.innerWidth;
		var largeurColonne = (largeurPage - 500) / 2;
		
		// petite marge
		largeurColonne -= 10;
		
		document.getElementById("colonne_gauche").style.width = largeurColonne + "px";
		document.getElementById("colonne_droite").style.width = largeurColonne + "px";
		
	}
	
	window.onload = resizeColonnes;
	window.onresize = resizeColonnes;
</script>
</HEAD>
<BODY>
<div id="container">
	<div id="colonne_gauche">Gauche</div>
	<div id="colonne_droite">Droite</div>
	<div id="contenu">CENTRE</div>
	
</div>
</BODY>
</HTML>
Administrateur
Bonjour,

quelles versions d'IE doivent être supportées ? Pour IE8+, display: table; avec table-layout: fixed; et display: table-cell; permettent de résoudre le problème assez simplement.
Sujet clos
Aller à