<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#container { max-width:960px; width:100%; min-width:400px; overflow:auto;}
#aside { height:300px; width:40%; min-width:150px; float:left; background-color:grey; }
#primary { height:300px; width:20%; max-width:200px; float:left; background-color:red; }
#secondary { height:300px; width:40%; min-width:150px; float:right; background-color:grey; }
</style>
</head>
<body>
<div id="container">
<div id="aside">Leftmost content</div>
<div id="primary">Primary content</div>
<div id="secondary">Secondary content</div>
</div>
</body>
</html>
Un couple de choses au sujet de cette mise en page:
- J'ai spécifié la hauteur et arrière-plan pour l'affichage uniquement.
- Le dépassement automatique est sur l'élément contenant pour effacer les flotteurs; Bien que vous pouvez utiliser un div plus clair aussi.
- Le conteneur a une largeur de fluide, mais il est au maximum de 960. Je choisis ce nombre de façon arbitraire, mais il est judicieux de maximiser les largeurs de fluide avant que les lignes de texte deviennent trop longues.
- Si vous gardez le conteneur fluide, la mise en page se casse si la fenêtre devient suffisamment petite. EDIT: J'ai ajouté une min-largeur de 400px au conteneur, cela devrait résoudre le problème.
En outre, je voudrais jeter un oeil à http://www.alistapart.com/articles/holygrail/. Bien qu'il s'agisse d'un article détaillant une disposition à trois colonnes fixe-fluide-fixe, je pense qu'il y a quelques idées là-bas que vous pourriez utiliser pour améliorer ma disposition, si vous étiez si incliné.
Cela peut dépendre de la compatibilité avec le navigateur dont vous avez besoin. –
Dernières versions d'IE, Firefox, WebKit et Opera. – NVI