2

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
kfuglsang
  • 2,385
  • 2
  • 21
  • 26
  • Not everyone knows what Blueprint is, some links to a live example of your problem and the Blueprint website would help us a lot :) – Kyle Oct 25 '10 at 11:24
  • True. Unfortunately I'm sitting at a cafe right now, so I can't put it online for anyone to see. What I meant by an elegant solution though is one that uses the capabilities of the Blueprint CSS framework. – kfuglsang Oct 25 '10 at 11:28
  • Well you can use a site like jsFiddle to put up a temporary example for us to see :) – Kyle Oct 25 '10 at 11:41
  • Ah cool, didn't know that site. I put it up here: http://www.jsfiddle.net/pDfGE/ As you can see, the three boxes doesn't fit inside the total width of 24 columns – kfuglsang Oct 25 '10 at 11:54
  • I See, I'll see if I can come up with a solution for you :) – Kyle Oct 25 '10 at 12:51

2 Answers2

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>
Nico
  • 170
  • 8
0

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.

Kyle
  • 65,599
  • 28
  • 144
  • 152
  • 3
    I know that is one solution, but it's really not what I want. I dont want to change anything from the Blueprint framework if I can avoid it. – kfuglsang Oct 26 '10 at 08:49