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 min-width property
The CSS min-width property sets the minimum width that an element can have. This property ensures that an element will never become smaller than the specified minimum width, even if the content would normally make it narrower.
Syntax
selector {
min-width: value;
}
Possible Values
| Value | Description |
|---|---|
length |
Defines minimum width in px, em, rem, etc. |
% |
Defines minimum width as a percentage of the parent element |
auto |
Default value; browser calculates the minimum width |
Example: Setting Minimum Width
The following example demonstrates how min-width prevents an element from becoming too narrow −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 50%;
min-width: 400px;
height: 100px;
border: 2px solid #3498db;
background-color: #ecf0f1;
padding: 20px;
margin: 10px 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.normal-box {
width: 50%;
height: 100px;
border: 2px solid #e74c3c;
background-color: #ffeaa7;
padding: 20px;
margin: 10px 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
Box with min-width: 400px (won't shrink below 400px)
</div>
<div class="normal-box">
Normal box without min-width (can shrink freely)
</div>
</body>
</html>
Two boxes appear: The first blue box maintains a minimum width of 400px even when the browser window is resized, while the second red box can shrink freely with the window size.
Conclusion
The min-width property is essential for creating responsive layouts that maintain readability and usability. It prevents elements from becoming too narrow and ensures consistent design across different screen sizes.
Updated on: 2026-03-15T11:22:37+05:30
165 Views
Advertisements