CSS: How does Width as a percentage work?

Question

I have what I think is a strange problem. I have one div, inside the parent div, and I give the child div a width of 100%, but it does not grow to the size of the parent div.

The parent div does not have a given width of any type. So my question is: does the percent width work only if the parent has the specified width or should it grow anyway?

UPDATE:

Some may be wondering how the parent div has a width to grow at all if it itself does not have the width of the set. The reason is because I have other siblings of the child inside the parent div with a set width for them, so the parent div has grown until they correspond to these sibs. Width

SAMPLE CODE:

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

The child element does not grow to satisfy the parent div. A width of 100% essentially does nothing I can say. This is in IE7.

Thanks.

FOLLOW-UP . Thanks to everyone for the answers. I'm busy testing at my end. Initially, I thought that the parent div only grows as wide as their children, but it turns out that I was mistaken, given my example above, which I encoded only to demonstrate my problem that I am experiencing. In my case, my parent div has position: fixed and bottom: 1px and right: 1px . From my tests, this seems to alter the behavior of the parent div. It no longer stretches to the full width of the page, but assumes that the behavior that I thought was somehow the case is the parent div, which expands to fit its widest child. So the behavior that I see now, but only because my parent div has a fixed position.

Answer 1

Without seeing the rest of your CSS and HTML, I'm going to assume that everything you posted is in your HTML and CSS.

In this case:

• parent-div will definitely be as wide as the page, i.e. one hundred%.
• the child will also be as wide as the page, i.e. 100%, and be inside the parent-div
• sibling will have a width of 250 pixels and be below the child

If not, then you have other HTML or CSS.

Answer 2

This is actually a css trick. This happens as follows:

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

See Absolute positioning inside relative positioning for more information .

thanks

Answer 3

This screenshot explains how measures are measured using CSS. Sorry French, this is from my computer.

filling, border and border http://img524.imageshack.us/img524/5211/capturedcran20100204173.png

Where "marge" means margin , "bordure" means border , and "espacement" means padding . margin falls around the border , which in turn falls around padding , which in turn falls around the actual size of the element. In this example (which was done by checking the <textarea> response tag), it shows that there is no field, the border is 1px wide, and there is a 3px pad between the <textarea> border and its contents; and the size that the content can use, with the exception of filling, is 660x200. This size matches the CSS width and height properties.

From a nested element, you can only occupy the actual size of the element. padding for the parent will result in your nested elements retaining margins. This means that there may be a space between the border of your nested and the border of its parent.

If you want your nested <div> to pick up the whole room, you must set your margin property to 0px and your parent's padding property to 0px .

Answer 4

As zneak noted, don't forget to reset the css box model ; see this wonderful article on understanding the box model .

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

To indicate do not forget to set

 #child-element { display: block; } 

since you can set it to inline , it will not expand to 100% of the width of the parent.

I could not replicate your problem, everything worked fine.