Dispositions de liquide CSS avec remplissage fixe/marges

Question

Je me demandais si quelqu'un connaissait un moyen d'incorporer des marges ou des marges de largeur de pixels à une conception de colonne fluide, sans avoir besoin de balisage HTML supplémentaire.

Pour illustrer davantage, envisager une mise en page simple html/css comme celui-ci:

<style> 
    .cont{width:500px;height:200px;border:1px solid black;} 
    .col{float:left;} 
    #foo{background-color:blue;width:10%;} 
    #bar{background-color:yellow;width:30%;} 
    #baz{background-color:red;width:60%;} 
</style> 
<div class="cont"> 
    <div class="col" id="foo">Foo</div> 
    <div class="col" id="bar">Bar</div> 
    <div class="col" id="baz">Baz</div> 
</div> 

Cette affiche correctement (sans tenir compte des bugs d'affichage divers css qui peuvent être pris en charge). Cependant, une fois que vous ajoutez, par exemple, un remplissage 10px à la classe col, les flottants ne s'affichent plus en ligne. La même chose se passe si vous voulez mettre une bordure 3px à la classe col. J'ai vu des techniques de CSS où les gens utiliseront une marge négative pour inverser les pixels ajoutés créés à partir du modèle de boîte, mais cela ne réduira pas la largeur de <div>. Donc, fondamentalement, ce que je veux, c'est une technique qui me permettra de garder une largeur de 10%, mais 10px de ce 10% seront bourrés (ou marge ou autre).

Answer 1

Il n'existe aucune solution pré-CSS3 sans "balisage HTML supplémentaire". Le width n'inclut pas le remplissage et les bordures, c'est juste la nature de la spécification. Si vous voulez éviter les marges négatives, il suffit d'un wrapper supplémentaire dans chaque div. Le css:

.padder {border: 3px solid green; padding: 10px;} 

Le html:

<div class="cont"> 
    <div class="col" id="foo"><div class="padder">Foo</div></div> 
    <div class="col" id="bar"><div class="padder">Bar</div></div> 
    <div class="col" id="baz"><div class="padder">Baz</div></div> 
</div> 

Pour la compatibilité CSS3, voir la réponse de bobince qui utilise box-sizing.

Answer 2

Une autre option consiste à calculer manuellement la largeur/marge/remplissage.

Ceci est possible car le conteneur a une largeur fixe.

Answer 3

Epargnez-vous une tonne de problèmes et commander 960 grilles (960.gs), Plan directeur (http://www.blueprintcss.org/) ou YUI (http://developer.yahoo.com/yui/grids/) Tous ont ce problème élaboré de sorte que vous définissez simplement un pourcentage (ou le nombre de grilles dans la cas de 960) et le reste du travail est fait pour vous. YUI et 960 ont même un générateur de sorte que vous n'avez pas à faire le travail. Comme un bonus supplémentaire, plusieurs de ces frameworks CSS ont un "reset" css qui "défait" les failles d'IE et standardise les polices, l'espacement, etc. qui nous rendent fous les gars de l'interface utilisateur.

J'ai récemment effectué une mise à jour de la conformité réglementaire de plusieurs milliers de pages Web de conceptions différentes pour une grande banque internationale. Nous avons standardisé YUI au début et j'ai vraiment apprécié la partie "grilles" pour sa facilité de déploiement. Il gère les sites avec 1million + uniques par jour sans défaillance ou retards notables. Une fois que vous vous êtes habitué à comment cela fonctionne, vous pouvez avoir un site en quelques minutes, sans jamais avoir à se soucier des flotteurs, padding, etc Dans mon travail personnel, j'utilise à la fois Blueprint et 960 pour des raisons similaires.

Answer 4

Vous pouvez le faire en utilisant box-sizing pour changer la signification de width afin qu'il inclut le rembourrage (et la bordure - un peu comme le modèle de boîte en mode Quirks, sans les autres inconvénients de cela). Il s'agit d'un style CSS3 proposed, ce qui signifie malheureusement qu'il ne fonctionnera pas sur les navigateurs plus anciens et plus obscurs, et qu'il doit encore être préfixé sur certains navigateurs.

.col{ 
    float:left; padding: 10px; 
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; 
} 

Plus important, cela ne fonctionne pas dans IE avant IE8.Si vous ne voulez pas compenser en lançant ces navigateurs en mode Quirks - et vous ne voulez vraiment pas le faire - vous pouvez essayer l'un des scripts/comportements de correction qui essaie d'implémenter box-sizing sur IE6-7.

Si cela ne suffit pas, vous devrez revenir à la méthode wrapper, comme cité par Scott. Au moins, cela fonctionnera partout.

De toute façon, faites attention à flotter avec des pourcentages qui ajoutent jusqu'à 100% et la mise en page liquide. Si la largeur du pixel ne se divise pas correctement par les pourcentages que vous utilisez, vous obtiendrez des arrondis. WebKit sera généralement arrondi à la baisse, ce qui peut vous laisser un pixel ou deux de votre largeur totale; IE6-7 sera arrondi au plus proche, ce qui si vous êtes malchanceux peut vous laisser un pixel ou deux, provoquant l'emballement inattendu de vos flotteurs.