Purely CSS – Faking Minimum Margins

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

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:

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.

You Rather

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.

There are still horizontal scroll bars in IE, as with the original. Thank you Ron.

Posted Tuesday, October 6th, 2009 · Back to Top

SPONSOR

Add Comment

32 Comments 24 Mentions

  1. Irmantas Author Editor

    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 =-.

    ·

  2. Sheldon Author Editor

    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 =-.

    ·

  3. Sam Dunn Author Editor

    Thank you guys, I’m trying to fix that but WordPress keeps adding it back in, I’ll keep trying.

    ·

  4. blub Author Editor

    clever!

    ·

  5. Cameron Author Editor

    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 :)

    ·

  6. Ron Adair Author Editor

    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?

    ·

  7. blub Author Editor

    hmm.. now when i think about it – Ron Adair is right… i was thinking too complicated too..

    ·

    • Abhijeet Author Editor

      Dave, Came across your blog. Nice tips on css csoiumizatton. Definitely bookmarking and will be coming back. All the best!P.S. Thanks for the prospective on Thesis. At one point I really considered buying one. Serhiy recently posted..Why Some Houses Sell While Others Sit VIDEO

      ·

  8. Eric B. Author Editor

    Nice trick! This will be very helpful.
    .-= Eric B.´s last blog ..14 Fantastic WordPress Plugins That I Use =-.

    ·

  9. Sam Dunn Author Editor

    @Ron Adair
    Thank you sir, I originally thought the padding would create overflow, I guess not.

    ·

    • Gwenelda Author Editor

      So that’s the case? Quite a rveealtoin that is.

      ·

  10. Ed Author Editor

    Very cool thanks for sharing. Definitely something I will be using.

    ·

  11. v-render Author Editor

    Thanks for sharing ..
    I think , i went through Ron Adair’s way before i read this .. so was in confusion .. update cleared it !!

    thanks

    ·

  12. David Author Editor

    Why would you not simply put padding on ? One div… padding on body… margin: 0 auto; on content?

    ·

  13. Jad Graphics Author Editor

    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 =-.

    ·

  14. Brian Lang Author Editor

    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.

    ·

  15. David Lewis Author Editor

    body {padding: 0 200px;}
    #content_box {width: 760px; margin: 15px auto;}

    ·

  16. David Lewis Author Editor

    p.s. My solution above would use a single div. The black band could be a body background image.

    ·

  17. Ron Adair Author Editor

    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.

    ·

  18. David Lewis Author Editor

    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.

    ·

  19. Martin Author Editor

    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+ =-.

    ·

  20. Bogdan Pop Author Editor

    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.

    ·

    • Sam Dunn Author Editor

      @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.

      ·

  21. freeze gridview Author Editor

    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

    ·

  22. Mike Author Editor

    PERFECT exactly what I needed, thank you

    ·

  23. Ricardo Author Editor

    It’s almost the same as using min-width on the wrapper.

    ·

  24. Dan Author Editor

    Isn’t it sufficient to give the wrapper div a left padding. Why do we need it to have padding on both sides?

    ·

  25. mansour Author Editor

    thnx alot for you guys your article inspired me alot. cheerz from sudan.

    ·

  26. Bede Constantinides Author Editor

    I had already resorted to media queries to solve this problem, but am glad to see there is such a simple solution to this problem!

    ·

  27. Tamara Whalley Author Editor

    Cool Solution
    Has anyone used this to set a minimum margin relative to the top of the page?
    I need to implement on a wordpress template?

    ·

  28. Prasanth Author Editor

    Thanks for the help! LOVE THIS SITE REALLY I MEAN IT! LOOK FORWARD FOR MORE TUTORIALS LIKE THIS ONE!

    ·

  29. jawad Author Editor

    very useful and a deep good explanation thank you

    ·

 

Build Internet by One Mighty Roar. Since 2008.