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

Answer 2

another option is to manually calculate the width/margin/padding.

This is possible since the container has a fixed width.

Answer 3

Save yourself a ton of problems and check out 960 grids (960.gs), Blueprint (http://www.blueprintcss.org/) or YUI (http://developer.yahoo.com/yui/grids/) All have this problem worked out so that you simply define a percentage (or number of grids in the case of 960) and the rest of the work is done for you. YUI and 960 even have a generator so you don't have to do the work. As an added bonus, several of these CSS frameworks have a css "reset" that "undoes" the IE flaws and standardizes fonts, spacing, etc that drive us UI guys bonkers.

I recently did a regulatory compliance update of several thousand webpages of varying designs for a major international bank. We standardized on YUI in the beginning and I really grew to enjoy the "grids" portion for its ease of deployment. It's handling sites with 1million+ uniques a day without fail or noticeable delays. Once you get used to how it works, you can have a site laid out in minutes, without ever having to worry about floats, padding, etc. In my personal work I use both Blueprint and 960 for similar reasons.

Answer 4

You can do it using box-sizing to change the meaning of width so that it includes the padding (and border—a bit like the box model in Quirks Mode, without the other drawbacks of that).

box-sizing is a proposed CSS3 style, which unfortunately means it won't work on older and obscure browsers, and it still needs prefixing on some browsers.

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

More significantly, it doesn't work in IE prior to IE8. If you don't want to compensate by throwing those browsers into Quirks Mode—and you really don't want to do that—you could try one of the fix scripts/behaviours that tries to implement box-sizing on IE6-7.

If this isn't enough, you'll have to fall back to the wrapper method, as quoted by Scott. At least this will work everywhere.

Either way, be careful floating with percentages that add up to 100% and liquid layout. If the pixel width doesn't divide nicely by the percentages you use, you'll get rounding. WebKit will typically round down, which can leave you a pixel or two shy of your full width; IE6-7 will round-to-nearest, which if you're unlucky can leave you a pixel or two over, causing your floats to unexpectedly wrap.