2

I'm creating an HTML page using the 960.gs grid system. I'd like to run a vertical dotted line down the centre of one of the gutters.

Page with grid-overlay (gutters marked in red):

Page with mocked-up vertical dotted line:

However, the gutters are enforced as margins in the grid.css style-sheet. When I add a border to the content columns, it immediately throws the grid off and breaks the page (the final column DIV wraps to the next line).

My workaround was to give the entire page a vertically repeating background of 940px x 2px, containing the dots, so that it would give the illusion of a dotted border.

I'd prefer this was handled in the code though.

My question: Is there a similar type of behaviour to text-indent?

Used with a minus value, this pulls back the start of the text without impacting the DIV's size, margin, padding, or adjacent DIVs.

Perhaps I can do something similar with the border of the columns.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Olly F
  • 2,729
  • 9
  • 31
  • 35

2 Answers2

1

As in the question, my workaround - and eventual solution - was to give the entire page a vertically repeating background of 940px x 2px, containing the dots, so that it would give the illusion of a dotted border.

As far as I understand, this is the most desirable and effective solution that I've found.

Olly F
  • 2,729
  • 9
  • 31
  • 35
0

You have to add an extra div. Same when you want to add padding.

<div class="container_12">
    <div class="grid_6">
        <div id="content">
            <!-- Your content -->
        </div>
    </div>
</div>

#content { 
    border-right: 1px dotted black;
    padding: 0 1em;
}
elclanrs
  • 92,861
  • 21
  • 134
  • 171
  • I don't quite understand. In your example I can see that `grid_12` sets a column that is the width of the entire container. Then `#content` would fill the width of that, right? But in my example I have a `container_12` containing `grid_3`, `grid_6` and `grid_3`. Adding a `border-right` to either of the first two grids will immediately impact the final grid. – Olly F Feb 09 '12 at 00:27
  • Just add an extra `div` inside the `
    ` and style the inner `div`. You can't add borders or padding to `grid_x` containers or it'll brake the grid.
     – elclanrs Feb 09 '12 at 00:29
  • My understanding is that the border of the div within `grid_x` cannot exceed the width of `grid_x`. The gutter that I want to style is outside of `grid_x`. – Olly F Feb 09 '12 at 00:48
  • You gonna have to play with padding too. I've been using 960gs for years and this is usually the way to do it and what you'll find on google if you look for a minute. Take a look http://jsfiddle.net/Wppqc/1/ – elclanrs Feb 09 '12 at 00:57
  • Ah! This is not what I was looking for (but thank you). The problem with your solution is that the border isn't really in the middle of the grid's true gutter. For example, on the first `grid_3`, the padding eats into the column. (see [http://imgur.com/a/Vbefb]) Instead of floating out in the centre of the gutter. To clarify, I don't want to break the grid that I've established, I'd like to build on top of it. – Olly F Feb 09 '12 at 20:05
  • Unless you use a repeating background image aka faux-columns this is the way to do it. – elclanrs Feb 09 '12 at 20:08
  • Yeah, that's what I thought too. That or building some kind of DIV that sits on top with Z-index and just contains the frame. Thanks for your help though. – Olly F Feb 09 '12 at 20:56