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 How to Make a Website CSS: Cascading Style Sheets Center the Wrapper

Mike Kohl
PLUS
Mike Kohl
Courses Plus Student 6,793 Points

What is the purpose of using the max-width property on a wrapper div?

Answer: if the browser is smaller than the maximum width, the element will reduce in size.

Am I missing something, I went over this a few times and the element (div) does not reduce in size when the browser is smaller than the maximum width.

For example, if i set the wrapper div to 940px, and I reduce the size of the browser the div does not reduce in size, only the browser does.

Helps center the design on the page. Max-wIdth also helps control the width width you're elements will expand, when using fluid widths for elements.

Helps center the design on the page. Max-wIdth also helps control the width width you're elements will expand, when using fluid widths for elements.

4 Answers

Helps center the design on the page. Max-wIdth also helps control the width width you're elements will expand, when using fluid widths for elements.

You can inspect this page, and others, on your PC to see max-width in action. This forum is in class grid-container with max-width 1430px. Using the Elements tab in chrome (i open this using ctrl-shift-j then go to elements, just habit) I can hover over the grid container div and see that the gray space to the right is there because of the max width. This allows treehouse to add the tips on the right hand side of the forum. You can uncheck that CSS rule and see what happens. The forum will get pushed behind the stuff to the right of the text and you won't be able to read everything here.

Mike Kohl
PLUS
Mike Kohl
Courses Plus Student 6,793 Points

I missed this question on the quiz 3 out of 4 tries. And I can't not see how the answer is correct.

The example above is using a fixed width for max-width ( and is not fluid ). So there is no reason for the div to reduce in size if I reduce the size of the browser it should stay at 940px wide if i expand it it should stay at 940px.

As suggested I will inspect this in google chrome when I get home later.

There is a difference between width and max-width.

http://stackoverflow.com/questions/6456468/css-width-and-max-width

Essentially, if you set a fixed width and a max-width there are rules that determine which one the browser will use (see link). Also you have to make the browser small enough to effect the width. What browser/OS are you using? When I use chrome on linux it acts differently than chrome on windows 7.

Mike Kohl
PLUS
Mike Kohl
Courses Plus Student 6,793 Points

I was taking a quiz.. and when I got done, I clicked the button "start discussion".

This is the question I had to answer on the quiz: What is the purpose of using the max-width property on a wrapper div?

The answer is: if the browser is smaller than the maximum width, the element will reduce in size.

When reading your guys responses I think your trying to answer the question as I would. Such as, setting the max-width property on a wrapper div would allow me to center the div and prevent the width from going to wide.

But that is not the answer in the quiz. The answer they specified is misleading and I was just wondering if I missed something.. because the div element never reduces in size ( in the project they never used percentages just a fixed max-width )