Using a auto margin in css but want a minimum margin

It might take another div to accomplish this task. I will refer to the div you are talking about as the #content div. I know that yours will have a bit more css. This is just my example of the margin in question. Next we would put the #content div in a div we will call #container. We will set the margins to auto in this div as well. The added aspect will be that we will add padding (right and left) to the #container div.

#content {
    margin: auto;
}

#container {
    padding-right: 5px;
    padding-left: 5px;
}

I think that this would achieve what you are looking for. Keep in mind a min-width for the #content div and it could work nicely.


I'm a little late, but here's an answer. Don't forget that you can style the HTML element!

html {
  padding: 20pt;
}

body {
  margin: auto;
}

That's it!


The only way to reach it will be to use a combination of margin: 0 auto and max-width. If you use pixels and not percentage, you may add media queries so the max-width is always smaller than the window/wrapper.

margin: 0 30px;

@media (min-width: 1280px) {
  margin: 0 auto;
  max-width: 1220px;
}

This will have margin of 30px until screen size is 1280px and then the max-width will keep it no more than 1220px.

Tags:

Html

Css