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 The Solution

Michael Lambert
Michael Lambert
6,286 Points

.article-content width

How did he work out the width for .article-content needed to be exactly 78%? Was it just trial and error?

2 Answers

Matthew Lang
Matthew Lang
13,483 Points

Not sure which video you are referring to, but here's my guess.

You are often able to work out the remainder of what is needed from taking existing margins/paddings and subtracting them from the overall value, resulting in 78%, for example, 11% on each side (11*2 = 22, 78+22 = 100%)

Michael Lambert
Michael Lambert
6,286 Points

Hia,

It is for the CSS Floats Workshop. One of the objectives is as below:

/*  
  Float '.article-content' so that it's positioned next to '.img-article'.
  Adjust the width of '.article-content' so that both elements are laid out side by side.
*/

.img-article has an image inside which is 150px with 20px right margin. So that comes to 170px in total. The instructor assigned 78% for .article-content to sit alongside .img-article. He didn't state how many pixels the view window is, to begin with, to help work out the remaining % to assign for the article but he managed to come up with 78% somehow?

Matthew Lang
Matthew Lang
13,483 Points

I see. I think it was just trial and error, finding a good percentage that worked best to fit the floated element alongside the image. If a floated element takes up 100% width, it will not sit on the same line as something else, therefor needs a width small enough to fit on the same line.

All in all, I think it was just trial and error, finding a percentage that works best - I'm guessing the teachers have tons of notes beforehand which they reference to.

dodders
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
dodders
Python Development Techdegree Graduate 38,680 Points

the width of 78% causes issues if you resize the page. I found a better optin was to set width: calc(100% - 170px);

The 170px is the width of the image + margin