CSS liquid layouts with fixed padding/margins

Question

I was wondering if anyone knows of a way to incorporate pixel width paddings or margins to a fluid column design, without the need for extra html markup.

To further illustrate, consider a simple html/css layout like this one:

<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 (disregarding miscellaneous css display bugs that can be taken care of). However, once you add, say, a 10px padding to the col class, the floats no longer display inline. The same goes if you wanted to put a 3px border to the col class. I've seen css techniques where people will use a negative margin to reverse the added pixels created from the box model, but it still won't reduce the <div> width. So basically, what I want is a technique that will allow me to keep a 10% width, but 10px of that 10% be padding (or margin or what not).

Answer 1

There is no pre-CSS3 solution without "extra html markup." The width does not include padding and borders, that's just the nature of the specification. If you want to avoid negative margins, then simply one extra wrapper in each div works. The css:

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

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

For CSS3 compatibility, see bobince's answer that uses box-sizing.