Div qui prend toute la largeur restante

Bonjour à tous !

J'ai un petit problème. J'ai 4 div contenues dans une div globale qui prend toute la largeur de l'écran. Les 3 premières divs ont une largeur fixe, je voudrais que la dernière prenne toute la place restante.

<div style="width:100%;">
<div style="width:300px; height:100%; display:block; background:red; float:left;"></div>
<div style="width:300px; height:100%; display:block; background:blue; float:left;"></div>
<div style="width:300px; height:100%; display:block; background:green; float:left;"></div>

<div style="float:left; background:url(Photo0267.jpg); width:100px; height:100%; display:block;">&nbsp;</div>
<br style="clear: both; margin: 0; padding: 0; border: 0; height: 0; line-height: 1px; font-size: 1px;"/>
</div>

des idées ?

merci

kevin

Bonjour,

Je ne pense pas que ce soit réalisable avec les techniques usuelles de positionnement absolu etc... En revanche la mise en page par tableau (non pas la balise <table> mais les déclarations CSS display: table; et display: table-cell; permettant d'obtenir un comportement semblable) semble tout indiquée pour ce type de rendu !

HTML :

<div id="conteneur">
	<div class="fixe rouge"></div>
	<div class="fixe bleu"></div>
	<div class="fixe vert"></div>
	<div class="violet"></div>
</div>

CSS :

html, body {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
}

#conteneur {
	width: 100%;
	height: 100%;
	display: table;
}

#conteneur > div {
	display: table-cell;
}

.fixe {
	width: 300px;
}

.rouge	{background-color: red;}
.bleu	{background-color: blue;}
.vert	{background-color: green;}
.violet	{background-color: purple;}

Attention par contre aux problèmes de compatibilité avec cette méthode : jusqu'à la version 7 incluse d'Internet Explorer, ces propriétés ne sont pas prises en compte. Et à ma grande surprise sur Google Chrome (version 15), le code ci-dessus ne fonctionne pas
Modifié par jeremy-p (09 Dec 2011 - 13:58)

merci pour l'idée ! je vais voir ce que je vais pouvoir en faire

Bonjour,

Pour commencer, j'éviterais de préciser un width: 100% à ta place puisque par défaut les éléments blocs occupent toute la largeur restante.

Ensuite, il te suffit d'appliquer un float: left aux 3 premiers blocs et simplement une margin-left sur le dernier, pour qu'il occupe toute la largeur restante.

Par exemple :

.fixe {float: left; width: 300px;}
.violet {margin-left: 900px;}

Cela devrait suffire en théorie (sauf si tu as d'autres propriétés parasites)

ah oui en effet, ça marche nickel !

merci pour l'astuce