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.
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.