Using Blueprint CSS, how do we style 3 columns, each 300px wide, with 15px margins or paddings in between?

Question

The width of the content-area is 960px, with 3 columns, each 300px, so total 900px, and with padding / margin of 15px between columns, which is total 30px, and finally, to the left of 1st column there should be 15px padding / margin, and to the right of the 3rd column, the same. So total is also 30px.

900px + 30px + 30px will be 960px.

How to do that in Blueprint / CSS? This can be done using simple CSS, but the coding standard requires using Blueprint CSS.

Answer 1

You can override Blueprint classes, see here:

http://jsfiddle.net/JeaffreyGilbert/aznVd/

I assume you're using Blueprint's grid.css.