CSS: How does Width work as a percentage?

Question

Hi all,

I'm having what I think is a weird problem. I have one div, inside a parent div, and I'm giving the child div a width of 100%, but it's not growing to the size of the parent div.

The parent div does not have a set width of any kind. So my question: does width in percentage only work when a parent element has a set width, or should it grow anyway?

CLARIFICATION:

Some may be wondering how the parent div has a width to grow to at all, if it itself does not have a set width. The reason is I have other siblings of the child element inside the parent div, with a set width to them, so the parent div has grown to meet those sibling widths.

CODE SAMPLE:

<div id="parent-div">
    <div id="child-element" style="width: 100%">Content</div>
    <div id="sibling" style="width: 250px"></div>
</div>

Child element is not growing to meet the parent div. The width of 100% is essentially not doing anything at all that I can tell. This is in IE7.

Thanks.

FOLLOW-UP: Thanks everyone for the answers. I'm busy testing on my end. I originally thought that parent div's only grow as wide as their children, but it turns out I was wrong given my example above, which I coded only to demonstrate my issue I'm having. In my case, my parent div has a position: fixed and bottom: 1px and right: 1px applied to it. From my tests, this appears to change the behavior of the parent div. No longer does it automatically stretch to the entire width of the page, but assumes the behavior I thought was the case anyway, which is the parent div expands only enough to accommodate its widest child. So that's the behavior I'm seeing now, but only because my parent div has a fixed position.

Answer 1

This is actually a css trick. It goes like this:

If you set the parent div position to relative and the child divs position to absolute then child divs will remain inside the parent div even though their position is absolute.

See: Absolute Positioning Inside Relative Positioning for more explanation.

Thanks

Answer 2

This screenshot explains how metrics are measured with CSS. Excuse the French, it's from my computer.

Where "marge" means margin, "bordure" means border and "espacement" means padding. Margin falls around the border, which in turn falls around the padding, which in turns falls around the actual element size. In this example (which was taken by inspecting the stack overflow answer <textarea> tag) shows that there is no margin, the border is 1px wide, and there is a 3px padding between the border of the <textarea> and its contents; and the size the content can use, excluding the padding, is 660x200. This size matches the CSS width and height properties.

From a nested element, you can only occupy the actual element size. Padding on the parent will cause your nested items to keep a margin. That means there may still be space between the border of your nested and the border of its parent.

If you want your nested <div> to take all the room it can, you must set its margin property to 0px, and the padding property of its parent to 0px as well.

Answer 3

Without having seen the rest of your CSS and HTML, I'm going to assume that what you've posted is all there is in your HTML and CSS.

In that case:

• parent-div will definitely be as wide as the page, i.e. 100%.
• child-element will also be as wide as the page, i.e. 100%, and be inside parent-div
• sibling will have a width of 250px and be underneath child-element

If this is not the case, you've got other HTML or CSS interfering.

Answer 4

As zneak pointed out, don't remember to reset the css box model , a great article on understanding the box model is http://css-tricks.com/the-css-box-model/

#parent div {
    padding: 0;
    margin: 0;
}

just to point out, don't remember to set

#child-element {
    display: block;
}

as you may have set it to inline an it won't expand to 100% of parent's width

I couldn't replicate your problem, everything worked just fine