Why percentage in width is working without having parent element width defined

I have a div element which has width set to 100% though it has no parent ele where width is defined it is working but according to percentages definition if percentages is defined in child element its parent should have it defined.

Hi there penubothuvenkannacho

that is the default width of block level elements. :winky:

You do not need to set it to that value. :eek:

coothead

3 Likes

You will find this with percentage heights. An element with the default value of height: auto has no defined height, it is content dependent, so percentage does not work.
With width: auto it fills the full width of the containing elements, from this a child can take a percentage value.

5 Likes

For width the percentage is based on the containing block.

https://www.w3.org/TR/CSS2/visudet.html#propdef-width

Specifies a percentage width. The percentage is calculated with respect to the width of the generated box’s containing block. If the containing block’s width depends on this element’s width, then the resulting layout is undefined in CSS 2.1.

Height on the other hand requires a parent with a specific height in order to work out the percentage.

https://www.w3.org/TR/CSS2/visudet.html#propdef-height

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box’s containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to ‘auto’. A percentage height on the root element is relative to the initial containing block.

5 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.