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 Styling Web Pages and Navigation Make a CSS Image Gallery

What is the difference between using max-width:, and width:?

I was just wondering what the difference is when using the two.

2 Answers

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

Max-width is very useful when setting the width to a percentage value, like 75%. Whatever you are sizing will always be 75% of its parent element unless it reaches the value of max-width.

This helps to make sure that if your page is opened on say a smart TV, the element won't take up 75% of it and be crazy huge. It's also great to use on an element contains paragraphs; this will help make sure the text does not to long on one line, which is harder to read.

Nicholas Olsen
seal-mask
.a{fill-rule:evenodd;}techdegree
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 Points

width: 1000px

will make the selected element 1000px no matter how big the screen size is.

max-width: 1000px

will make the selected element equal to the width of the screen, up to 1000px