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
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 :P