Purely CSS – Faking Minimum Margins
Sadly, min-margin is nonexistent in the CSS world. I was okay with that – until recently, when I realized I needed it. After a fair share of general thought and Google usage, I arrived upon a solution, which I invite you to check out below.
So what situation would you need min-margin in? Take a second to look at the demo to see a before and after.
If you just realized that this might be something you need, wonderful, let’s get rolling.
The HTML
When laying out the HTML, odds are there isn’t much you will have to change from your normal procedure
<div id="wrapper"> <div class="padding"> <div id="content"> <!--Content--> </div> </div> </div>
Assuming you center your website like most of the world, you should be familiar with wrapper and content elements. What we are adding to the mix is a third element between the two – padding.
The CSS
First off, here’s the styles that make this happen:
#wrapper{ text-align:center; padding-right:200px; }
.padding{ width:960px; margin:0px auto; }
#content{ width:760px; float: right; } /*I know there are two right's, it's a mistake WordPress keeps adding in*/
Here’s what role each one serves:
- #wrapper – Contains everything. Padding-right should be the size that you want the margin to be (on the left side in this case).
- .padding – Centered in the middle of the page, the width is the combination of #wrapper‘s padding and #content‘s width. The padding-right of #wrapper offsets this element so that it appears centered.
- #content – Aligned to right side of .padding and defines the width that you actually want the content to be. This is what appears to be perfectly centered.
And with those few pieces, you should now have a functional minimum margin, while still being able to have a centered website.
A Real Life Example
For those of you interested in a live example of this pseudo minimum margin, feel free to check out You Rather – the site that I first made this for.
I would welcome any comments/thoughts/possible improvements you may have to offer. Thank you.
Update – Alternate Method
This was technique was pointed out in the below comments by Ron Adair, which actually makes this whole thing laughably simple using padding instead of margins.
To my knowledge this works in all major browsers identically to my example with one less div.
#wrapper{ text-align:center; padding:0 150px; }
#content{ width:760px; margin:0px auto; }
There are still horizontal scroll bars in IE, as with the original. Thank you Ron.
