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
Vlatko .
2,526 PointsWhat's the difference between the width and max-width declarations in CSS?
When coding, I usually always use the width declaration, but the way the tutorials are set up, it seems that it places a preference to using max-width in the exercises. Usually, I don't touch max-width unless I'm planning to use a min-width declaration, but other than that, is there a difference in using max-width over width?
3 Answers
Md.Atiquzzaman Soikat
20,416 PointsYes there is difference between a width and max-width css properties,max-width is maximum allocated with for any html element,on the other hand width sets a specific width to a html element,To understand more clearly if you set max-width for a body element to 960px then it's not gonna be more then 960px in width but it can be less,but if you set width 960px,then the width will be 960px min and max no matter what.
For example you can set body width of a html page like this body{ width: 100%; max-width: 800px; } With css like this your page's body will remain 100% in width but will not exceed 800px.
Eben Smith
5,170 Pointswidth = This is what the width of this element is.
max-width = This is the width that this element cannot exceed, but it may be smaller than this.
Jason Anello
Courses Plus Student 94,610 PointsThis project has max-width: 940px set on the wrapper div. Essentially this keeps you from getting a horizontal scrollbar below viewport widths of 940px. At wide screen widths it stays at a reasonable fixed size of 940px. Below 940px it acts like a fluid 100% width container.