🌐 Web Development Roadmap - Part 31CSS Width, Height & OverflowCSS width, height, and overflow properties control the dimensions of HTML elements and how their content behaves when it doesn't fit inside them.
These properties are important for creating properly sized, responsive website layouts.
1. Width PropertyThe width property defines the width of an element.
<div class="box">
Welcome to CSS
</div>
.box {
width: 300px;
background-color: lightblue;
}
Here, the element has a width of 300px.
You can use different units:
.box {
width: 300px;
}
.container {
width: 80%;
}
.section {
width: 100vw;
}
2. Height Property
The height property defines the height of an element.
.box {
width: 300px;
height: 150px;
background-color: lightgreen;
}
Here:
• Width = 300px
• Height = 150px
You can also use relative units:
.hero {
height: 100vh;
}
This makes the hero section as tall as the viewport.
3. Min-Width
min-width defines the minimum width an element can have.
.box {
width: 50%;
min-width: 250px;
}
Even if the available space becomes smaller, the element won't shrink below 250px.
4. Max-Width
max-width defines the maximum width an element can have.
.container {
width: 100%;
max-width: 1200px;
margin: auto;
}
This is commonly used to prevent content from becoming excessively wide on large screens.
5. Min-Height and Max-Height
These properties control the minimum and maximum height of an element.
.box {
min-height: 100px;
max-height: 300px;
}
• min-height: The element cannot become shorter than 100px.
• max-height: The element cannot become taller than 300px.
6. What Is Overflow?
Overflow happens when the content inside an element is larger than the available space.
Example:
.box {
width: 200px;
height: 100px;
overflow: hidden;
}
If the content exceeds the box dimensions, some content will be clipped.
7. Types of Overflow
A. overflow: visible
This is the default behavior.
Content can appear outside the element's boundaries.
.box {
overflow: visible;
}
B. overflow: hidden
Extra content is clipped and not displayed.
.box {
overflow: hidden;
}
C. overflow: scroll
Displays scrollbars so users can access overflowing content.
.box {
overflow: scroll;
}
D. overflow: auto
The browser provides scrolling when necessary.
.box {
overflow: auto;
}
8. Overflow-X and Overflow-Y
You can control horizontal and vertical overflow separately.
.box {
overflow-x: auto;
overflow-y: hidden;
}
• overflow-x: Controls horizontal overflow.
• overflow-y: Controls vertical overflow.
Useful for horizontally scrollable menus, tables, and content areas.
9. Real-World Example: Responsive Card
HTML:
<div class="card">
<h2>Learn Web Development</h2>
<p>
Learn HTML, CSS and JavaScript
to build modern websites.
</p>
</div>
CSS:
.card {
width: 100%;
max-width: 400px;
min-height: 200px;
padding: 20px;
margin: auto;
background-color: lightblue;
border-radius: 10px;
overflow: auto;
}
This creates a card that:
• Uses available width.
• Never exceeds 400px.
• Has a minimum height of 200px.
• Allows scrolling if its content overflows.
10. Quick Revision•
width: Sets element width
•
height: Sets element height
•
min-width: Sets minimum width
•
max-width: Sets maximum width
•
min-height: Sets minimum height
•
max-height: Sets maximum height
•
overflow: Controls overflowing content
•
overflow-x: Controls horizontal overflow
•
overflow-y: Controls vertical overflow
Key Takeaway• Use
width and
height to define dimensions.
• Use
min-width and
max-width to control flexible sizing.
• Use
min-height and
max-height to control vertical dimensions.
• Use
overflow when content doesn't fit inside its container.
Double Tap ❤️ For More
Новый список