Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS max-width property
The CSS max-width property is used to set the maximum width that an element can have. When the content would normally be wider than this value, the element will not exceed the specified maximum width.
Syntax
selector {
max-width: value;
}
Possible Values
| Value | Description |
|---|---|
length |
Defines the maximum width in px, em, rem, etc. |
% |
Defines the maximum width as a percentage of the parent element |
none |
No maximum width limit (default value) |
Example
The following example demonstrates how max-width constrains an element's width −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
max-width: 300px;
background-color: #f0f8ff;
border: 2px solid #4CAF50;
padding: 15px;
margin: 20px 0;
}
.no-limit {
background-color: #ffe4e1;
border: 2px solid #ff6b6b;
padding: 15px;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="container">
This div has a max-width of 300px. Even if the content is very long,
the width will not exceed 300px, and the text will wrap to the next line.
</div>
<div class="no-limit">
This div has no max-width restriction and will expand to fit its content
or the full width of its parent container.
</div>
</body>
</html>
Two boxes appear: The first box (blue background) is constrained to 300px width with text wrapping, while the second box (pink background) expands to fill the available width.
Conclusion
The max-width property provides control over element sizing by setting an upper limit on width. It's particularly useful for responsive design and preventing content from becoming too wide on larger screens.
Updated on: 2026-03-15T11:19:55+05:30
148 Views
Advertisements