
- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
Set min-width and max-width of an element using CSS
To set the minimum and maximum width of an element, you can try to run the following code
Example
<!DOCTYPE html> <html> <head> <style> div { max-width: 300px; min-width: 100px; background-color: red; } </style> </head> <body> <p> Below is a div with maximum and minimum width. Resize the web browser to see the effect.</p> <div>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div> </body> </html>
Output
- Related Articles
- Set min-height and max-height of an element using CSS
- CSS min-width property
- CSS max-width property
- The min-width and max-width declaration for Flexbox doesn’t work on Safari? Why?
- How to set the min and max height or width of a Frame in Tkinter?
- How to set width and height of an element using jQuery?
- Change the width of element using CSS
- Perform Animation on CSS min-width
- The min-width Property in CSS
- Change the width and height of element using CSS
- Set the height and width of an image using percent with CSS
- Perform Animation on CSS max-width
- The max-width Property in CSS
- Set the width of an image with CSS
- Set the width of the left border using CSS

Advertisements