how to center a box using blueprint css framework

Question

My _base.scss contains the following

$blueprint-grid-columns: 12;
$blueprint-container-size: 750px;
$blueprint-grid-margin: 0px;
// Use this to calculate the width based on the total width.
// Or you can set $blueprint-grid-width to a fixed value and unset $blueprint-container-size -- it will be calculated for you.
$blueprint-grid-width: ($blueprint-container-size + $blueprint-grid-margin) / $blueprint-grid-columns - $blueprint-grid-margin;

In my page I have a big box that is 750 px wide

#big-box {
  @include container;
  background-color: #FFFFFF;
  margin-top: 15px;
  min-height: 550px;
}

inside this box I want to have a box that is aligned in center but I can't seem to get this done. Below is my code

#login{
  @include container;
  margin-top: 15px;
  @include column(11);
  background-color: #F1F1F1;
}

what should I do so that the #login box is in the middle?

Image of how it looks now:

Answer 1

The reason this fails is that the column mixin not only sets the width of the element, but also floats it left and applies a right margin (unless it's the last column, which has no margin). span is used internally by the column mixin to set the width. So you can use span here to simply set the width without getting the float and margin that column would add.

Check out the compass blueprint grid implementation here:
https://github.com/chriseppstein/compass/blob/stable/frameworks/blueprint/stylesheets/blueprint/_grid.scss

So if you use span instead of column, you just get the width you want. Then you can apply margin: 0 auto; to get the centering you desire. container sets this as well, though typically you want to use container as it's intended in blueprint, as a style applied to top level layout elements. If you just apply the margin yourself you don't need to override the grid width that container sets.

The other, "grid" way to fix this would be to prepend/append columns to push the box to the center. E.g. if your layout was 19 across and the box was 11 wide, you might @include prepend(4); To add 4 columns of width to the left side of the box.

#login {
  // Don't include container.  In blueprint "container" means this is an outer
  // container for the grid, and has the grid width, centered on the page.
  // @include container;

  @include column(11);

  // I have no idea how many columns your page has, but if it had 19, 4 left columns 
  // would effectively center the div. | 4 + 11 + 4 |.
  // Adjust to your real layout.
  @include prepend(4);
}