Reputation: 9050

How to make div width almost 100%

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;
}

Upvotes: 2

Answers (3)

Jared Farrish

Reputation: 49238

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/

Upvotes: 2