Center a layout using CSS positioning and negative margin
Using CSS' margin property is the de facto technique to create an horizontally centered CSS layout, and I have used it as the basis for this site's layout for most of its decade long history.
Lately however I became irritated by an aspect of the design.
I am one of these people who usually does not maximise my browser to fill the full screen. Designed with a width of 960 pixels in mind my widescreen monitor provides a non-maximised browser window ample space for the the sites layout, but on my laptop's smaller screen the browser window, which is just one of several applications I usually have open, occassionally has to get slimmer and slimmer, and irritatingly I found myself having to horizontally scroll on my own site! Oh, the shock, the horror!
Nobody likes to have to scroll horizontally, and worse still the part of the layout I was having to scroll across to reach the content was the "facade", the backdrop image which although valid considering what it is I do here is essentially decorative blank space! This would not do!
It was not the centered layout that was causing the problem. The layout uses two container frames, an outer one with a background image which is the site's backdrop which is placed by CSS positioning and an inner one which containing content which is placed to the right using margins.
What I need I decided is that when the browser window is smaller than the width of the outer container the backdrop should slide left off-screen allowing the inner container to occupy the available space to make horizontal scrolling unnecessary.
How to do this though?
A negative left margin which would shift the backdrop to the left seemed the answer. Use of negative margins are frowned upon by some developers but use of negative margins are perfectly valid CSS.
However, the technique of centering using the auto value requires the left and right margin values set at zero (margin:0 auto;), so a
negative left margin is not possible.
There is another method to achieve an horizontally centered layout however, one that does allow left and right margins to be set to allow the centering to be offset.