Blueprint CSS boxes

Question

I am currently testing out Blueprint to create the layout for a site. So far it has been going great, but now I've run into a problem I'm wondering if there is any elegant solution to.

I am using the default 24 column layout and have a situation where I would like to do something similar to:

<div class="span-8 box">..</div>
<div class="span-8 box">..</div>
<div class="span-8 box last">..</div>

Problem is that the box-class adds a padding which causes the three div's to not fit into the 24 columns. One "solution" is to use span-7 instead for all three, but this doesn't fill the entire width.

Any ideas?

Answer 1

You could change the "span-7" css rule:

...
.span-7 {width:274px;}
...

And change the divs to "span 7".

Simplest thing I could think of :)

jsFiddle example.