CSS CSS Basics Understanding Values and Units Percentages

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

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>