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

Omarwali Jones
Omarwali Jones
8,251 Points
Posted by Omarwali Jones
Omarwali Jones
8,251 Points

percentage values (%) in relation to the body element?

so in this video Guil styles two sections main and secondary at 60% of the total width of the body? Isn't this equivalent to 120%? Which would break the body element? Or does it just expand because it has no set max width (container style) through pixels? Or is the "must total 100% of container / parent element" only apply if you want them on the same line? For example to articles or images with captions within a div or say a 2 column / article within a div / section. I guess it would be easy for me to test this with some empty div elements but I'm busy blitzkrieging the CSS stuff and formulating a cheat sheet :)

1 Answer

Ste Royle
Ste Royle
9,538 Points
Ste Royle
Ste Royle
9,538 Points

Because the #primary-content and #secondary-content are separate div elements their widths are not being added together, by default they start out as 100% on their own row. The CSS you add just changes that to 60% width still on their own row.

<div class="primary-content t-border">
  <p>Content</p>
</div>

<div class="secondary-content t-border">
  <p>Content</p>
</div>