Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS The Solution

marcos rodriguez
marcos rodriguez
1,214 Points

This got real confusing with the border-box stuff at the end. Also, the overflowing we weren't showed before.

I am not sure if its because am tired or this is just that confusing but wow.. I'm totally spaced out right now. I can't even begin with what the box-sizing is?

And I did want to point out that the course I touched on never introduced overflow. I guess they thought it would be easy enough to get correct but sorry I didn't.

1 Answer

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

Try not to advance through the videos so quickly. Practice is the key to retaining what you have learned.

The box-sizing property controls how the css box model's dimensions are calculated through the browser.

The default value is content-box, which means that any padding and border values defined on the box will be added to the overall width of the element.

If you have a specific sized element that you want to stay at that size without getting any larger in width or height, then it would be a pain to have to do some math calculations to get that size if you have added any border or padding.

Therefore, CSS introduced a new value for this property to save us from the dirty math work called border-box. The value border-box adds any borders and padding inside the element instead of outside to add it to the total width/height of the elements defined size.

For example:

You have an element that you have given a defined width of 300px. You add padding and a border to that element to give it some breathing room and visual appearance.

Without the border-box value, this element would expand its defined 300px value size. We don't want that, we want the box to remain our defined size, so we add the property box-sizing and the value border-box.

.content {
  width: 300px;
  padding: 20px 10px;
  border: 1px solid orange;
  box-sizing: border-box;
}

The overflow property controls content overflowing the boundaries of an element with a defined height. The overflow property is also useful for clearing floats. Although scroll bars may appear, the best method for clearing floats is to use a clearfix.

You can find out information about both box-sizing and overflow properties through the CSS Basics course.

Hope this helps.

marcos rodriguez
marcos rodriguez
1,214 Points

Thanks for your help!

Hey if I want to practice my own website, do you know how I can set that up? In other words, with textedit I know how to set it to html text but I am not sure how to open a css file nor how to test it on the web browser. Thanks again!

I doubt that he was going through the videos quickly, the practice session is asking us to do stuff that aren't being taught before we are prompted to attempt it.