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. 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 andcontent elements. What we are adding to the mix is a third element between the two – padding. First off, here’s the styles that make this happen: Here’s what role each one serves: And with those few pieces, you should now have a functional minimum margin, while still being able to have a centered website. 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. 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.The HTML
The CSS
A Real Life Example
Update – Alternate Method
0 comments