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

Priscilla Othily
Priscilla Othily
2,106 Points
Posted by Priscilla Othily
Priscilla Othily
2,106 Points

auto value.. what exactly does it do?

Hello there!

Just wanted to understand clearly what the auto value does. From what I understand so far, it will, in the case it is associated with the property margin, fill in whatever width/length I have in my browser. So why did it not fill the space when the images were too big?Does it mean the images were too big for the browser itself? anyways...thank you for helping me out here, something needs to be clarified.

4 Answers

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

It would depend where you are adding the value 'auto'. For instance

     margin: 0 auto;

Will set the left and right margin to equal amounts therefore centering the element. (i.e. You have a 1000px screen and you set the width of a section to 600px and then add the above to margin. Your left and right margin from 'auto' will equate to 200px each).

If you set the height to 'auto' on an element it will then change height depending on content.

So really it depends on the property you are using it on.

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

using Auto for the left/right margin centers the object within the parent container. The browser automatically calculates the amount of margin for you. Images dont get centered using auto margin since they are inline-block by default.

Priscilla Othily
Priscilla Othily
2,106 Points
Priscilla Othily
Priscilla Othily
2,106 Points

Thank you Adam and Stone!

That was what I originally understood. But in the video the images being too big kind of stopped the auto value to be physically visible for us viewers. Thank you also Stone for clarifying that images dont get centered using auto margin since they are inline-block by default. valuable info here :)

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

If you want the images to scale with its container you can do the following

    img {
        display: block;
        width: 100%;
        max-height: 100;
    }
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

100% for max-height. Damn edit post on here is JUNK!

Priscilla Othily
Priscilla Othily
2,106 Points
Priscilla Othily
Priscilla Othily
2,106 Points

great tip! thank you Adam. Definitely writing this one down.