How to make div width almost 100%

Tags: html,css

Problem :

I have such a html code:

<div id="outer">
    <div id="inner"></div>
</div>

How can I make #inner div to have width 100% of #outer but minus 10px?

Here is my css:

#outer {
    width: 100%;
    max-width: 500px;
}

---

Solution :

NOTE

See ThirtyDot's answer, as it does not impact the outer element's width:

How to make div width almost 100%

The below will actually make the outer element's width total the width plus the padding left and right values, which is not what the question is asking. Sorry for the confusion. :)

---

You could add a padding left and right of 5px (assuming you want the #inner to be 10px less total, not per side):

<div id="outer">
    <div id="inner"></div>
</div>

#outer {
  width: 500px;
  height: 500px;
  background: red;
  padding: 2px 5px;
}
#inner {
  width: 100%;
  height: 500px;
  background: blue;
}

http://jsfiddle.net/ZtaCM/

EDIT

Taking into account the max-width property, see this demo:

<div id="test">
    <div id="outer">
        <div id="inner"></div>
    </div>
</div>
<p>
    <input type="button" onclick="changeWidth('400px')" value="Change to 400px"/>
    <input type="button" onclick="changeWidth('500px')" value="Change to 500px"/>
    <input type="button" onclick="changeWidth('600px')" value="Change to 600px"/>
</p>

#outer {
  width: 100%;
  max-width: 500px;
  background: red;
  padding: 2px 5px;
}
#inner {
  width: 100%;
  height: 200px;
  background: blue;
}
#test {
  background: yellow;
  width: 600px;
}

function changeWidth(width) {
    document.getElementById('test').style.width = width;
}

http://jsfiddle.net/ZtaCM/1/