Question

I’m implementing the 960 grid system on my pre-existing site. I’m using a jQuery theme which means that every div that has content is assigned the class ui-widget-content which, as part of the theme, gives it a 1px border. I like this border design since my content divs are white, while my site’s background is off white – giving it a nice visual contrast.

The problem I have, however, is that with these 1px borders, I can’t fit divs horizontally since they are too big. For example, if I do this:

<div class="grid_16 alpha omega">
  <div class="grid_10 alpha ui-widget-content">
    <div class="grid_5 alpha">some stuf...</div>
    <div class="grid_5 omega">some stuf...</div>
  </div>
  <div class="grid_6 omega">
    more stuf...
  </div>
</div>

This results in the grid_10 div being too big by 2 pixels and thus, hanging out the end of the grid_16 div on the far right. I thought I would fix this by creating a new class like so:

.border-fix {
    border-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; }

and then adding that to the grid_10 div, like so:

<div class="grid_16 alpha omega">
  <div class="grid_10 alpha ui-widget-content border-fix">
    <div class="grid_5 alpha">some stuf...</div>
    <div class="grid_5 omega">some stuf...</div>
  </div>
  <div class="grid_6 omega">
    more stuf...
  </div>
</div>

Now, however, my two inner grid_5 divs are being squeezed so that they now sit on top of each other, not side by side since there isn’t enough room horizontally (since the grid_10 div is 2 pixels narrower than it should be with the borders being inside, not outside)

So how do I fix this (or is it fixable)? I like the style of having the border on the div since it separates the content from the background nicely. But, with a border, my div widths are mucked up. I prefer not to force it with an extra column, as suggested in this question.

Any magic tricks I might try?

Thanks

Answer 1

I came up with a solution I believe works that doesn’t break the grid system, I don’t have to edit any of the div sizes to account for a border, nor do I have to add any wierd margin or padding of 1px. Perhaps this is a bit hacky, but all I did was create a new class like this:

.border-fix {
    border: 0px;
    box-shadow: 0px 0px 3px grey;
}

and added this class to any div that I wanted to have borders. This will override the ui-widget-conent class to remove the border and adds a shadow to the box. The design of the shadow I have there says to have a 0px horizontal shift, a 0px vertical shift, and blur the shadow by 3 px. With a color of grey, this looks almost exactly like a normal border without it affecting my div widths.

Again, I think this might be a bit of a hacky way of doing things, but it seems cunningly clever, if I don’t say so myself 😛