CSS Div Width Percentage and Padding Without Breaking Layout

CSS Div width percentage and padding without breaking layout

If you want the #header to be the same width as your container, with 10px of padding, you can leave out its width declaration. That will cause it to implicitly take up its entire parent's width (since a div is by default a block level element).

Then, since you haven't defined a width on it, the 10px of padding will be properly applied inside the element, rather than adding to its width:

#container {
    position: relative;
    width: 80%;
}

#header {
    position: relative;
    height: 50px;
    padding: 10px;
}

You can see it in action here.

The key when using percentage widths and pixel padding/margins is not to define them on the same element (if you want to accurately control the size). Apply the percentage width to the parent and then the pixel padding/margin to a display: block child with no width set.

Update

Another option for dealing with this is to use the box-sizing CSS rule:

#container { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    /* Since this element now uses border-box sizing, the 10px of horizontal
       padding will be drawn inside the 80% width */
    width: 80%;
    padding: 0 10px;
}

Here's a post talking about how box-sizing works.

Can we have percentage width in a fixed layout webpage?

The article says "the components inside it have either percentage widths or fixed widths"

A percentage of a fixed width is in fact fixed, because it will always have the same fixed size.

Example:

The container component is 1000px fixed width. Two inside components are 70% and 30% width. The first one will always be 700px, the second one will always be 300px.

<body style="width: 1000px">

    <div style="width: 70%">Component #1, will always be 700px width</div>
    <div style="width: 30%">Component #2, will always be 300px width</div>

</body>

As written in the article: "The important thing is that the container (wrapper) element is set to not move". If you remove the fixed size of 1000px of the container element, you will lose the fixed layout.

CSS percentage width and percentage padding error in all broswers?

By default any block-level element is going expand to fill the width of its containing element. In this case specifying the width of the inner element is redundant. In general it's better (and less confusing) to use explicit metrics for your layout over percentages.

This sums it up nicely.

Padding top as percentage of width not working

On MDN for padding :

Percentages refer to the width of the containing block [source]

This means percentage padding is calculated according to the width of the parent element, not the element itself.

In your case padding top for #container is calculated according to the width of <body>.

CSS Percentage Horizontal Padding Not Relative to Element After Achieving Max Width?

Why would the padding of the inner wrapper continue to increase with the viewport width if the max-width has been achieved?

Because, http://www.w3.org/TR/CSS21/box.html#padding-properties:

The percentage is calculated with respect to the width of the generated box's containing block, […]

Your outer div provides the containing block here.

You will need to use an additional element inside .header-inner here, and apply the padding to that, so that the .header-inner that has the max-width set becomes the containing block for that inner element.

CSS Div Width Percentage and Padding Without Breaking Layout