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

HTML How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Adham Hammoud
Adham Hammoud
738 Points
Posted by Adham Hammoud
Adham Hammoud
738 Points

Hi, I don't know how did Mr.Nick defines all these percentages like width, margin and padding..etc, How can I know that?

As ex. Mr Nick, gave the margin as example 45% of gallery on what bases, he did that ?

Amandeep Dindral
Amandeep Dindral
8,915 Points

Take a look at this. It's called a box model. This really helped me grasp margin, padding etc.

http://www.w3.org/TR/CSS21/box.html

Let me know if this helps explain css properties a bit better!

Cheers

Lori Harvey
Lori Harvey
3,123 Points
Lori Harvey
Lori Harvey
3,123 Points

In this case he chose 45% because there are two columns and each image gets to take up 45% of the 100% available, and the remaining 10% allows for the margins around them.

1 Answer

M. Cotter
M. Cotter
6,179 Points
M. Cotter
M. Cotter
6,179 Points

Hi Adham,

Nick chose to use 45% because he wanted TWO columns of equal-width.

45% + 45% = 90%

He then added 10% worth of margin.

90% + 10% = 100%

Another way of looking at this is:

(column 1) + (margin) + (column 2) = 100%

45% + 10% + 45% = 100%

Basically, he is ensuring that the content, altogether (including the columns AND margins), adds up to 100%.

You can break this down into various combinations such as:

(column 1) + (margin) + (column 2) + (margin) + (column 3) = 100%

30% + 5% + 30% + 5% + 30% = 100%

OR

(column 1) + (margin) + (column 2) + (margin) + (column 3) + (margin) + (column 4) = 100%

20% + 5% + 60% + 3% + 10% + 2% = 100%

... as long as it equals 100%, you are good to go!

I hope this helps answer your question. If it does, please remember to mark my answer as the Best Answer! :) If not, let me know if you have a follow-up question and I'll do my best to respond.

M.