CSS Dimensions

🎯 Why Control Dimensions?

Understanding how to control the width and height of elements is essential for creating responsive, well-structured layouts. CSS provides multiple properties to set exact sizes, minimum and maximum constraints, and responsive dimensions.

Dimension Control Benefits:

✅ Create precise layouts and designs
✅ Build responsive websites that adapt to screen sizes
✅ Prevent content overflow and layout breaking
✅ Maintain aspect ratios and proportions
✅ Control element behavior across devices

↔️ Width Property

The width property sets the width of an element's content area.

Setting Width:

/* Absolute units */
.box {
    width: 300px;      /* Pixels */
}

/* Relative units */
.container {
    width: 50%;        /* Percentage of parent */
    width: 20em;       /* Relative to font size */
    width: 30rem;      /* Relative to root font size */
}

/* Viewport units */
.hero {
    width: 100vw;      /* 100% of viewport width */
    width: 50vw;       /* 50% of viewport width */
}

/* Auto (default) */
.element {
    width: auto;       /* Browser calculates width */
}

Common Width Units:

px (pixels): Fixed size, exact control
% (percentage): Relative to parent element
em: Relative to element's font size
rem: Relative to root (html) font size
vw (viewport width): 1vw = 1% of viewport width
auto: Browser calculates automatically

↕️ Height Property

The height property sets the height of an element's content area.

Setting Height:

/* Absolute units */
.box {
    height: 200px;     /* Pixels */
}

/* Relative units */
.sidebar {
    height: 100%;      /* 100% of parent height */
}

/* Viewport units */
.hero {
    height: 100vh;     /* 100% of viewport height */
    height: 50vh;      /* 50% of viewport height */
}

/* Auto (default) */
.content {
    height: auto;      /* Height based on content */
}

⚠️ Height Percentage Gotcha

For percentage heights to work, the parent element must have an explicit height set. Otherwise, use vh units or set parent heights.

⬅️ Max-Width

The max-width property sets the maximum width of an element. The element can be smaller but never larger than this value.

/* Responsive container */
.container {
    width: 100%;
    max-width: 1200px;  /* Never wider than 1200px */
    margin: 0 auto;     /* Center it */
}

/* Responsive images */
img {
    max-width: 100%;    /* Never overflow parent */
    height: auto;       /* Maintain aspect ratio */
}

/* Flexible box */
.card {
    width: 90%;
    max-width: 400px;   /* Cap at 400px */
}

Why Use Max-Width?

✅ Create responsive layouts that work on all screens
✅ Prevent content from becoming too wide on large screens
✅ Keep images from breaking layout
✅ Maintain readability with optimal line lengths

➡️ Min-Width

The min-width property sets the minimum width of an element. The element can be larger but never smaller than this value.

/* Prevent element from being too narrow */
.button {
    min-width: 120px;   /* At least 120px wide */
    padding: 10px 20px;
}

/* Flexible with minimum */
.sidebar {
    width: 20%;
    min-width: 250px;   /* Never narrower than 250px */
}

/* Input fields */
input[type="text"] {
    width: 100%;
    min-width: 200px;   /* Minimum usable width */
}

⬆️ Max-Height

The max-height property sets the maximum height of an element.

/* Scrollable container */
.comments {
    max-height: 400px;
    overflow-y: auto;   /* Add scrollbar if needed */
}

/* Dropdown menu */
.dropdown {
    max-height: 300px;
    overflow: auto;
}

/* Modal content */
.modal-body {
    max-height: 80vh;   /* Max 80% of viewport height */
    overflow-y: auto;
}

⬇️ Min-Height

The min-height property sets the minimum height of an element.

/* Full viewport height minimum */
.hero {
    min-height: 100vh;  /* At least full screen height */
}

/* Flexible section */
.section {
    min-height: 400px;  /* Minimum height for content */
    padding: 40px;
}

/* Card with minimum height */
.card {
    min-height: 200px;  /* Never shorter than 200px */
}

🔗 Combining Dimension Properties

You can combine multiple dimension properties for flexible and responsive designs.

Example 1: Responsive Container

.container {
    width: 90%;         /* Flexible width */
    max-width: 1200px;  /* Don't get too wide */
    min-width: 320px;   /* Don't get too narrow */
    margin: 0 auto;     /* Center horizontally */
}

Example 2: Flexible Card

.card {
    width: 100%;
    max-width: 400px;
    min-height: 300px;
    max-height: 600px;
    overflow: auto;     /* Scroll if content exceeds max-height */
}

Example 3: Responsive Image

img {
    width: 100%;        /* Fluid width */
    max-width: 100%;    /* Never overflow container */
    height: auto;       /* Maintain aspect ratio */
}

Example 4: Full-Screen Hero

.hero {
    width: 100vw;
    min-height: 100vh;  /* At least full screen */
    max-height: 1200px; /* Cap at 1200px */
}

📐 Aspect Ratio

The aspect-ratio property maintains a specific width-to-height ratio.

/* Square */
.square {
    aspect-ratio: 1 / 1;
    width: 200px;       /* Height will be 200px */
}

/* Widescreen (16:9) */
.video {
    aspect-ratio: 16 / 9;
    width: 100%;
}

/* Portrait (3:4) */
.card {
    aspect-ratio: 3 / 4;
    width: 300px;       /* Height will be 400px */
}

💼 Practical Real-World Examples

Example 1: Centered Content Container

.main-content {
    width: 90%;
    max-width: 1140px;
    min-width: 320px;
    margin: 0 auto;
    padding: 20px;
}

Example 2: Responsive Card Grid

.card {
    width: 100%;
    max-width: 350px;
    min-height: 400px;
    padding: 20px;
    margin: 10px;
}

Example 3: Full-Height Sidebar

.sidebar {
    width: 250px;
    min-width: 200px;
    height: 100vh;
    overflow-y: auto;
}

Example 4: Responsive Button

.button {
    padding: 12px 24px;
    min-width: 120px;
    height: 44px;       /* Touch-friendly size */
}

Example 5: Modal Dialog

.modal {
    width: 90%;
    max-width: 600px;
    min-width: 300px;
    max-height: 90vh;
    overflow-y: auto;
}

🎨 Live Examples

Fixed Width:

300px fixed width

Percentage Width:

50% width (of parent)

Max-Width Responsive:

100% width, max 400px

Min & Max Height with Scroll:

This box has min-height: 100px and max-height: 150px. If content exceeds max-height, it becomes scrollable. Try resizing to see the effect. This is useful for creating fixed-height containers with overflow handling.

Aspect Ratio (Square):

1:1 Ratio

📝 Test Your Knowledge - MCQ

💪 Practice Questions

Create a container that is 90% width with a maximum width of 1200px and centered horizontally.
Make a square box (equal width and height) using aspect-ratio that is 250px wide.
Create a full-height hero section that covers at least 100vh but has a maximum height of 1000px.
Style an image to be responsive: full width of container, maintain aspect ratio, never overflow.
Create a scrollable div with minimum height of 200px, maximum height of 400px, and auto overflow.

📌 Summary

width: Sets the width of element's content area
height: Sets the height of element's content area
max-width: Sets maximum width (element can be smaller, not larger)
min-width: Sets minimum width (element can be larger, not smaller)
max-height: Sets maximum height (use with overflow for scrolling)
min-height: Sets minimum height (useful for full-screen sections)
aspect-ratio: Maintains width-to-height ratio
Units: px (fixed), % (relative to parent), em/rem (font-based), vw/vh (viewport)
Responsive Images: max-width: 100%; height: auto;
Responsive Container: width: 90%; max-width: 1200px; margin: 0 auto;
Full Viewport Height: Use height: 100vh or min-height: 100vh
Best Practice: Combine width with max-width for responsive designs