Fixed fill / CSS CSS fluid plates

Question

I was wondering if anyone knows how to incorporate paddings or pixel width fields into the fluid design without the need for additional html markup.

For further illustration, consider a simple html / css layout similar to this:

<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>

This displays correctly (without taking into account various CSS display errors that you can take care of). However, adding, say, a 10px addition to the class col, the floats no longer appear on the line. The same thing happens if you want to put a 3px border in a class col. I saw css methods where people will use negative margin to undo added pixels created from a window model, but it still won't reduce the width <div>. So basically, I want to use a technique that will allow me to maintain 10% width, but 10px out of 10% is indentation (or margin and what not).

Answer 1

CSS3- " html-". width , . , div . Css:

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

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>

CSS3 . bobince, box-sizing.

Answer 2

box-sizing, width, ( border-, Quirks, ).

box-sizing CSS3, , , , , .

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

, IE IE8. , Quirks - - / , box-sizing IE6-7.

, , . , .

, , 100% . , , . WebKit , ; IE6-7 , , , , .

Answer 3

- //.

, .

Answer 4

960 (960.gs), Blueprint (http://www.blueprintcss.org/) YUI (http://developer.yahoo.com/yui/grids/) , ( 960), . YUI 960 , . CSS- css "reset", "" IE , .., ,

- . YUI, , "" . 1 + . , , , , .. Blueprint, 960 .