Question

I have a fixed-width page that I want to add a simple border to with the Border CSS command. However, I don’t want this border to balloon the page and cause smaller screens to have a horizontal scrollbar. I’m not too great with CSS, but I know enough that I looked into using negative margins to offset the border’s width since I had already done something similar to add borders to other elements that I don’t want moving. But when I do so on my main container div, everything gets thrown off-center and smashed up to the left side of the page. I’m using the Blueprint CSS framework and I figured there was something in there that was messing with my margins, and I found the main container is applied a “Margin: 0 auto;” to center it on the page.

So, I ask now, how the hell can I apply a negative-margin border to a page while still centering the layout on-screen? I’ve tried to wrap the container in a div and apply the border and negative-margin to it, but no dice, I tried nesting a div inside the container and applying the border to the container, but that went badly as well. Somebody throw me a bone here!

Answer 1

If the negative margin is working, you can get the centering back by adding a wrapper div with a fixed width and margin: 0 auto.

In my testing, the negative margin didn’t change the width of the box. A few other strategies:

1. Adjust the width of your div to offset the width added by the borders.
2. Add a background image to the div that simulates left and right borders.
3. Use JavaScript to detect the width of the window and remove the border when necessary.
4. Add body { overflow-x: hidden } to suppress the horizontal scrollbar.
5. Use a CSS3 media query to add the border only when there’s enough room (optionally falling back to JavaScript (see #3) for older browsers).

Update: Instead of negative margins, you can probably use box-sizing: border-box so that the border doesn’t add to the element’s width in the first place.