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.
Tags: center, CSS, layout, negative margin, positioning
Recently updated picks
Not #FreeBritney: Britney Spears’ conservatorship extended until 2021 with father Jamie remaining in control (updated 22nd August 2020)
As well as being a fun way to engage, polls serve to discourage spam bots by restricting some features such as search to those that have voted in at least one poll. It’s totally up to you, but voting takes but a few seconds, is anonymous to other visitors and is hopefully fun to boot!
(11th May 2020)
(Latest Picks 2nd December 2019)
(Latest Picks 25th March 2019)