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.
Discussion
October 6th, 2009 at 5:03 PM
I think that #content float should have value right not rightright.
.-= Irmantas´s last blog ..Secure your forms with Zend_Captcha captcha Part 2 reCaptcha =-.
October 6th, 2009 at 5:07 PM
Good tutorial, but your float right on line 5 has to ‘right’s
#content{ float:rightright; width:760px; }
.-= Sheldon´s last blog ..Calculator & Search Engine Optomisation for Glass Art NZ =-.
October 6th, 2009 at 5:10 PM
Thank you guys, I’m trying to fix that but Wordpress keeps adding it back in, I’ll keep trying.
October 6th, 2009 at 5:23 PM
clever!
October 6th, 2009 at 5:24 PM
Wow! absolutely fantastic! actually needed just this on a project recently.. kinda told the client it wasn’t possible
hehe now I know it is.. great css! and it makes so much sense 
October 6th, 2009 at 5:44 PM
Am I missing something? Isn’t this simpler, while accomplishing the same thing:
http://www.iamron.com/downloads/min-padding.html
Did I not understand the requirements correctly?
October 6th, 2009 at 6:12 PM
hmm.. now when i think about it – Ron Adair is right… i was thinking too complicated too..
October 6th, 2009 at 7:36 PM
Nice trick! This will be very helpful.
.-= Eric B.´s last blog ..14 Fantastic Wordpress Plugins That I Use =-.
October 6th, 2009 at 8:29 PM
@Ron Adair
Thank you sir, I originally thought the padding would create overflow, I guess not.
October 6th, 2009 at 10:49 PM
Very cool thanks for sharing. Definitely something I will be using.
October 6th, 2009 at 11:01 PM
Thanks for sharing ..
I think , i went through Ron Adair’s way before i read this .. so was in confusion .. update cleared it !!
thanks
October 7th, 2009 at 3:19 AM
Why would you not simply put padding on ? One div… padding on body… margin: 0 auto; on content?
October 7th, 2009 at 11:19 AM
Awesome! I never knew that was possible. Thanks for sharing your little CSS tips and tricks!
.-= Jad Graphics´s last blog ..5 Beautiful Text Effects for Your Next Project – Free Download =-.
October 7th, 2009 at 1:33 PM
You could also use a grid system like 960 Grid System (http://960.gs) or Fluid 960 Grid System (http://www.designinfluences.com/fluid960gs/) and leave some empty column(s). Then if you need the space for an element of some sort, you can easily add it in.
October 7th, 2009 at 2:57 PM
body {padding: 0 200px;}
#content_box {width: 760px; margin: 15px auto;}
October 7th, 2009 at 2:59 PM
p.s. My solution above would use a single div. The black band could be a body background image.
October 8th, 2009 at 10:59 AM
I was going to recommend David’s solution first, but declined in case one wanted more control on other pages/other sections of the same page. Having the 2 divs seems a good balance that greatly decreases the complexity, while allowing for scalability.
October 8th, 2009 at 2:07 PM
Ya. Padding on the body tag won’t cause scrollbars. So just pad out the area you wish to reserve for your absolutely positioned common element(s) (like a logo or admin bar) and then set the width of your wrapper appropriately and centre it with margin: 0 auto; Of course… I didn’t test this with any versions if Exploder. LOL.
October 20th, 2009 at 12:52 PM
Great article, such a simple solution, thank you! I’ll be trying this out later on today
.-= Martin´s last blog ..customise the default size of avatars in WordPress 2.8+ =-.
November 4th, 2009 at 5:22 PM
Why use such a technique? It works ok with that minimum margin so that the logo and content don’t overlap, but if I have a large screen that allows me a browser window with let say… 3000 pixels width, your logo is way to the left far away from content which is definitely not good.
November 4th, 2009 at 5:26 PM
@Bogdan Pop
This would be useful in situations using Twitter-like layouts where the background is locked to the left.
Also, CSS Globe (http://cssglobe.com/) is a good example.
November 20th, 2009 at 2:50 AM
Hi you have taken your time to build a demo for explaining this. i too didnot understand how it is going to be useful. But after seeing the demo it actually explained i should use the min-margin effectively for the layouts.
Thanks for the efforts taken
December 9th, 2009 at 8:37 PM
PERFECT exactly what I needed, thank you
February 18th, 2010 at 10:24 AM
It’s almost the same as using min-width on the wrapper.
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.