CSS Max-Width

CSS max width property is used to provide the maximum width. If the content is larger than the maximum width, then the element's height will be changed.

Note: Understand the CSS width & max-width property. Please keep in mind that max-width does not create a horizontal scroll bar when the browser window size is smaller than the defined max-width while width creates a horizontal scroll bar when the browser window size is smaller than the defined width.

Example

Source Code

          <style type="text/css">
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}

div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
</style>

Try it now

Code Explanation

Note:In this example,CSS width & max-width property is mentioned.To see the difference between these two properties, resize the browser window smaller than the predefined width & max-width & see the differences between these two CSS properties.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4