I've checked the question Using a percentage margin in CSS but want a minimum margin in pixels? which describes how to implement a minimum margin when using percentage.
But I am using this:
width:80%;
margin:5px auto;
How to set a minimum margin on the left side? I've used auto margin as per Reducing the space equally when resizing browser window.
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.
Instead of playing with the margin, you can set a max-width, so on small screen you will get at least 5px of spaces:
margin: 5px auto;
max-width: calc(100% - 5px)
Maybe not supported 9 years ago, but nowadays all browsers support calc property.
Combine max-width and margin.
Rather than introducing a wrapper element or media queries, just use a combination of max-width and margin on the element itself:
max-width: min(80%, calc(80% - var(--gutter)));
margin: 0 auto;
The element's width will be:
const root = document.documentElement;
const input = document.getElementById("gutter");
const minGutterValue = getComputedStyle(root).getPropertyValue("--gutter")
input.value = parseFloat(minGutterValue)
input.addEventListener("change", function (e) {
console.log("e.target.value", e.target.value);
root.style.setProperty("--gutter", `${e.target.value}px`);
});html, body {
margin: 0;
height: 100%;
}
:root {
--gutter: 100px;
}
#target {
max-width: min(80%, calc(80% - var(--gutter)));
margin: 0 auto;
background-color: blue;
height: 100%;
}<div id="target" >
<input id="gutter" type="number" />
</div>
I had a similar problem. I wanted my body to be centered, with a minimal margin of 50px, but with a maximal width of 1400px. My solution was:
body {
max-width: 1400px;
width: calc(100% - 100px); /* Body takes 100% space, less 50px of margin both sides*/
margin: 0 auto;
}
you could use margin-left:#px or
margin:5px auto #px #px;
the last #px is for left; its like margin:TOPpx Rightpx Bottompx Leftpx
These are my findings - this is not meant to be an answer and certainly is not comprehensive - these are my notes from chasing down a similar problem. (N:B Probably not expressed in strictly correct technical terms but hopefully you will get the main meaning)
My aid memoire - for chasing down un-expected positioning problems.
floated or absolutely positioned or position fixed elements with width auto shrink to content dimensions.
Always specify a width and height for a floated element - this avoids confusion.
Regardless of positioning the height of an element = content height if no height specified.
Be aware of collapsing margins when attempting to use margin auto vertical. Unless explicitly controlled touching vertical margins will collapse into each other.
When using margin auto horizontal ensure if not a block element set css display: block; and regardless always ensure width < 100% of container.
Beware IE8 and earlier non standards compliant box model (i.e. included padding and border in the width instead of being additional to) -- resolution always use html 5 doctype ... <!DOCTYPE html>
From your description of the problem - I am guessing that issue you are having is down to the relationship between the element and it's container - which was the problem I encountered. jsfiddle.net is great place to play with this sort of thing.
You can often imitate minimum margin with transparent borders and background-clip property. Here's an example: https://codepen.io/waterplea/pen/MWKYPxW
.margin {
width: 400px;
padding: 40px;
box-sizing: border-box;
background: white;
background-clip: padding-box; // necessary for border to be transparent
margin: auto;
border-radius: 48px; // 48 - 40 = 8px border radius
border: 40px solid transparent; // 40px minimum margin
box-shadow: inset 0 0 0 1px gainsboro; // imittating 1px solid border;
}
Note: No way to drop shadow like that if you use overflow: hidden on your container.
One simple way to achieve this is the following:
div {
margin: 5px max(calc((100vw - 1440px) / 2), 32px);
}
This applies a margin auto considering the max-width of the container as 1440px, but if the margin that would be applied is less than 32px, applies the 32px margin;
For the problem presented in the question, it could be done like this:
div {
margin: 5px max(10vw, 32px);
}
The container will have a width of 80%, with a minimum spacing of 32px.
If i saw your code & question may be you can write like this:
div{
margin:5px 10% 5px 5%;
}
Check this for more http://jsfiddle.net/spVNu/1/
