Question

When using the Blueprint CSS framework, I wanted to remove the margin between all columns. Unfortunately, when I remove these margins, any div that spans all columns now appears wider than the total combined width of the divs on those rows that have had margins removed. The effect is worse on those rows that have many columns.

For those rows in which I’m using all 24 columns, I want the right edge of the divs to line up. Can this issue be resolved without resorting to a bunch of Blueprint hacks, or without manually resizing a container or something by just the right number of pixels to account for the missing margins?

Code in Head:

<style type="text/css">
        .topnav{background-color:blue;}
        .logo{background-color:yellow;}
        .icons{background-color:orange;}
        .search{background-color:red;}
</style>

Code in Body:

<div class="container">
        <div class="span-24 first last top topnav">Top Nav</div>
        <div class="span-5 first logo">Logo</div>
        <div class="span-3 append-8 icons">Icons</div>
        <div class="span-8 last bottom search">Search</div>
</div>

Answer 1

If you really need to remove the margins between the columns (I doubt that’s the case, but without more info I cannot provide more help) then the best thing would be to redo the entire grid. Here is a generator for blueprint, where you can specify all needed variables, including the gutter (margin between columns): http://ianli.com/blueprinter/