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/


    CSS Howto..

    How to select col id using jquery to hide via css

    How to add HTML/CSS using the editor on DNN? How to add markup without relying on modules?

    How to make partial scrolling div?

    jQuery: How to check if an element exists and change css property

    how do i allign my div containers using css

    How to change position of Semantic UI sidebar for different screen sizes?

    How can I make a visual header in CSS without PHP?

    How do I get PHPStorm to use the correct path for CSS?

    how to animate “simple jquery filtering” by using css only

    How can I center the below form?

    how to style php file with css + 1 more than one element

    How to correctly apply a CSS style to all the images in a div having a specific class?

    How to change tr color on mouse over when there is already implemented?

    how to position div with css and force text to wrap around

    How to detect CSS is turned off with PHP?

    How to align images and urls within div trees in CSS?

    How to re-size inputs for a <%= form_for %> form in Ruby on Rails

    HTML/CSS: How to center floating divs?

    How does the padding work in responsive CSS square?

    How to add custom font for Avada WordPress Theme

    How do I use pseudo-classes to select all children except first and last?

    How to make a list of “background-image” CSS using WebDriver with Java

    How do I create a mobile version of Nav Bar [closed]

    How can I select the first IFRAME within the second FB tag in a div?

    How do I stop the text from moving when hovered? (background-image is involved)

    CSS - 2 divs side-by-side, one floated - how do I make the other fit next to it without overlapping?

    Boostrap: How to “stick” a button over an image when re-sizing

    How can I move text to a new line if it breaks the width of a box?

    How to show hidden content when hover in CSS not working

    How can I make a different CSS for the first child
    ?