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 almost 10 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 almost 10 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 almost 10 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 almost 10 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 almost 10 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 almost 10 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 almost 10 years ago by apnerve
  • Doesn't this break the alpha and omega behavior? mamal over 8 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 almost 10 years ago by Nathan DeGruchy