Q:

Center a div with a max-width without margin: auto;

Thats my pen: http://codepen.io/helloworld/pen/oxgqpJ
I want to center a div with a fixed max width, but when I am under the fixed max width I want a margin of 10% on each side , because at the moment there is no visible margin in that resolution area.
The drawback is using that 10% margin on each side the div is not centered anymore it starts on the left side...
How can I fix that?
<div id="container">
  Center me with a fixed max width, but when I am under the fixed max width I want a margin of 10% on each side , because at the moment there is no visible margin.
</div>

#container
{
  margin: 0 auto;

  // use instead in smaller resolutions
  //margin: 0 10%;
  max-width:1024px;
  background:orange;
}

A:

I'm not quite sure I fully understand your question, but maybe this will do.
I would just use the margin to make sure it's centered and then padding to ensure the 10% on either side.
Obviously this means that it only satisfies your requirements for the actual content of the div (the text) rather than the div itself, but again; maybe that's good enough?
#container
{
  max-width:1024px;
  margin: auto;
  padding-left: 10%;
  padding-right: 10%;
  background:orange;
}

