Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Understanding Values and Units Percentages

Posted by sarahmoore4
sarahmoore4
6,980 Points

Does a parent element need an absolute unit value for a child element to use a percentage unit when sizing?

Say your code looks like this: <main> <article> <h1>This is my article</h1> <p>Random words just for filler</p> </article> </main>

In your CSS rules you have not declared an absolute unit of measurement for the width or height of your main element - could you use a percentage unit to size the article element within the main element? Would the main element just naturally take up 100% of the browser window so in that case using a percentage unit for the article element would just make it relative to the main element's default 100% width and height?

1 Answer

projectsbykyle
projectsbykyle
1,951 Points
projectsbykyle
projectsbykyle
1,951 Points

By default the body element will be the width of the viewport. Block level elements such as main naturally will take up 100% of their containers width. With that, since there was no width adjustments applied, the main element is currently taking up 100% width and any of its children would be relative to that. So if the body was reduced to 50% width, the main would adjust relative to that and since it takes up 100% width of its container, it would also be 50% of the overall page. Generally, the body would stay at 100% width and you just change the width of your container element then the children adjust relative to that.