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
Shafeeq Ahmed
6,058 PointsWidth or Max-Width
What is the difference between setting the "width" to percentage value and using the "max-width" property in CSS. It seems like they both do the same job.
3 Answers
Adam Rolfson
2,132 PointsMax-width is only going to tell your element how large it can get, but doesn't actually define how large it should be. Width should be used as the primary attribute to have greater control over your element, then you can add the max-width attribute to fine tune designs. It becomes more useful when you are looking to design a responsive webpage, meaning it will change as the browser window size changes.
Luke Pettway
16,593 PointsMost people use max-width as a way of preventing certain elements from getting too large. For example it is a good practice to prevent text from being wider than 50-65 characters. So you might want to limit certain text section from being wider than that.
Images are the same way, you might want to set a max-width so that an image doesn't scale larger than its native size and look pixelated, although you still want it to try and fit the size of the container it is in so that on smaller screens it fills the width completely. That is why you'll usually see width set to 100% and then max-width set to a static size.
Shafeeq Ahmed
6,058 PointsThanks Guys for ur replies
Michael Harper
14,741 PointsMichael Harper
14,741 PointsThey can be used together to give an element a maximum width, but allowing flexibility at smaller widths - getting larger as browser width increases, but once 'max-width' is reached it doesn't get any larger regardless of how much wider browser becomes. Also, there's a 'min-width' property that can be included to prevent the element from becoming too narrow, eg:
width: 50%; min-width: 300px; max-width: 600px;