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

Chung Chin Ang
Chung Chin Ang
1,787 Points
Posted by Chung Chin Ang
Chung Chin Ang
1,787 Points

Help On Understanding CSS Declaration

Hi,

I am trying to understand how in the lesson CSS: Cascading Style Sheets, Center the Wrapper, with the css declaration: #wrapper{max-width: 940px; margin: 0 auto;}, everything inside wrapper is centered?

I don't quite understand how and why this declaration can help center the wrapper. Can someone enlighten me? Thanks!

2 Answers

Tod Novak
Tod Novak
3,173 Points
Tod Novak
Tod Novak
3,173 Points

The margin takes 4 properties: 0 (top), 0 (right), 0 (bottom), 0 (left). If you want the two opposite ends to be the same, you can use just two properties: 0 (top & bottom), 0 (left & right). With margin: 0 auto, you are basically telling the element (#wrapper), to set the top and bottom margin to 0, and the left & right margin to auto. This will center the element and ensure that it has an equal margin on each side (left & right). I believe you would need to set the max-width of the element (#wrapper) in order to be sure the element was centered.

I hope that helps.

stoyantodorov
stoyantodorov
7,666 Points

You need a width, not a max-width. Otherwise you are correct.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Stoyan,

It centers fine with max-width The css posted in the question is what the project uses and the wrapper is centered. Using max-width allows it to be fluid and shrink below 940px rather than getting a horizontal scrollbar if a fixed width was used.

stoyantodorov
stoyantodorov
7,666 Points

That's true. What I meant is the width is the more general case, but I didn't see the related project.

Chase Lee
Chase Lee
29,275 Points
Chase Lee
Chase Lee
29,275 Points

The margin is outside of your content, not apart of it. Kinda like a bubble. What auto is doing is automatically centering the margin in the middle of the page. Hence auto = center or middle.

The content is sealed to the margin, so when you center the margin, you also center the content.

Did that help? Please let me know if you have any more questions.

stoyantodorov
stoyantodorov
7,666 Points

Let me disagree. Your idea of auto=center is wrong in more than 1 way. auto is NOT centering the margins. auto in this case tells the browser to automatically determine the margins, so it is setting them to be equal. (i.e. the space left and right of the element is set to be equal)

On the other hand if you use auto only on margin-right OR margin-left, the margin will take all available space and push the element to the left or to the right, respectively.

margin: 0 auto; is a shorthand version of

  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;

I'd recommend to try using auto on each individual margin, while the rest are set to 0, and you will understand it.