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 can use the class this way:

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