Hi

I just recently started looking at 960 Grid System that I found here on Doctype. The documentation seems to be pretty sparse on the subject, so I can't figure out how to use the grid system if my elements have borders.

An example:

<div class="container_16" style="border: 1px solid #000">
  Hello there!
</div>

This would in fact make the container 962 pixels wide and not 960 pixels and it would break the idea completely. How does this work?

  • How does if break the idea? the idea is that the elements are laid out on a grid - you can add borders and still have a grid layout. Not sure what you mean? Tony Crockford about 7 years ago
  • Agree with Tony...962 pixels wide is still thin enough to be supported in resolutions of 1024 x 768. It shouldn't break the grid :) danwellman about 7 years ago
  • What I meant was that if I have a container which is 962 pixels wide and then a bunch of smaller objects in the contained grid without borders, their total width will not add up to 962 pixels. blahblah about 7 years ago
  • and that's a good thing or they would break the grid.. all the widths in the 960 system are set through classes - adding borders needs some care on the contained elements, but it's okay on the containers - see www.bclm.co.uk for example Tony Crockford about 7 years ago

4 answers

orta 244
0
points
This was chosen as the best answer

you have to manually make the width of the elements smaller, or apply a border via a background-image.

Answered about 7 years ago by orta
1
point

If you're just meaning a border on your container, but not on your grid elements, then it won't make any difference at all - assuming you're using a strict doctype (which you should be) the width of the container will still be 960px, with 1px of border either side.

Putting borders on elements that also have grid_1, grid_2 etc on them is a bit different though, see the answer above.

Answered about 7 years ago by Greg Brown
1
point

I follow the following technique while dealing with grids as changing the width may break the grid system:

  1. for containers, there is no problem with adding border. So... go ahead!
  2. for grid elements, if I add a border-width of 'n'px, I compensate it from the margin by reducing 'n'px on both sides.

eg. for the following HTML , If I'd like to add borders to #article and #container,

<div id="container" class="container_16">  

  <div id="main" class="grid_10">

    <div id="article" class="grid_6 alpha">    
    </div>

    <div id="aside" class="grid_4 omega">
    </div>

  </div>

  <div id="sidebar" class="grid_6">
  </div>

</div>

I'd add the following rules to the CSS

#container{
  border:1px solid #333;
}
#article{
  border:1px solid #333;
  margin-left:9px; /* border + margin = 10px */
  margin-right:9px; /* border + margin = 10px */
}

This works for me and now I use 960 for every project I do.

Answered about 7 years ago by apnerve
  • Doesn't this break the alpha and omega behavior? mamal almost 6 years ago
0
points

When I use grids, specifically 960.gs, I add an internal wrapper div to add the border to, this lets me not break the grids, and lets me style the 'box'.

Answered about 7 years ago by Nathan DeGruchy