CSS child width 100% or px question

Question

Maybe a simple question with an easy answer.

I wondered today what is the difference between a child width in px or 100%, when the child is going to be the exact same width as the parent. The outcomes will be the same I know, but what is best to use?

Example;

div {width: 300px;}
h1 {width: 300px;} /*or..*/
h1 {width: 100%;}

<div>
<h1>Width of child</h1>
</div>

Does it matter? And which do you use?

score 6 · Accepted Answer · answered Apr 04 '11 at 20:54

6

Visually, both of your examples will look the same.

But using width: 100% for the child element means if you ever want to change the width of both, you only need to change the width of the parent element.

Also note that a h* tags are block-level elements, so, by default, it's already set to 100% width, so in your example, setting any width for h1 is redundant.

answered Apr 04 '11 at 20:54

DA.

39,848
49
150
213

Thank you for this. Exactly what I needed, will accept it as answer when I can. – Basic Apr 04 '11 at 20:58
No, the typical browser default for block-level elements is {width: auto;}, which functions differently (and better, IMO -- See my answer) from percentage widths. BTW, default style properties are browser-specific, and not part of the formal standard; though there are W3C- *recommended* defaults for some properties see http://www.w3.org/TR/CSS2/sample.html – Faust Apr 05 '11 at 07:36

score 1 · Answer 2 · answered Apr 04 '11 at 20:55

1

If you use 100%, then that's one less modification over time as the width of the parent changes. So using 100% makes your CSS more maintainable.

answered Apr 04 '11 at 20:55

Babak Naffas

12,395
3
34
49

I disagree. 100% means the child's content area is 100% of the parent's content area -- so if you add border or padding to the child, the whole object (content area + border + padding) will need to protrude outside the parent. This is a common CSS mistake. Once CSS3 box-sizing is fully supported in relevant browsers, you'll be able to apply {box-sizing: border-box} and *only at that time* will percentage widths be so maintainable. That's a ways off: http://caniuse.com/css3-boxsizing – Faust Apr 05 '11 at 07:15

score 1 · Answer 3 · answered Apr 04 '11 at 21:14

There is a much better alternative to both:

 {width:auto;}

...on the child element.

For your example, with either {width:100%} or {width:300px}, if you decided to then apply padding or a border to the child (h1), then it will overflow outside its container. In you use pixel-width, then you would need to subtract the sum of (padding-left + padding-right + border-left + border-right) from the width of the child to get it to just fit inside, snug. In the case of percentage-width, you would have to do a squirely calculation to come up with the correct percentage (and probably still be a tad off).

But {width:auto} will automatically account for padding and border, and its computed width will be the appropriate amount less than the container, so that the outer edge of the border on H1 stays just within the content area of your div.

BTW: "auto" is the default width for most block-level elements in most browsers. — Faust, Apr 04 '11 at 21:18

score 0 · Answer 4 · answered Apr 04 '11 at 20:59

Another example: it could make a difference to which element you'd actually apply a fixed size background image. Use px in that case so modifications on layout would not break your images. As Babak already said, it's only relevant for later modifications.

CSS child width 100% or px question

4 Answers4