width, height, min/max sizing

Width and height control element size. They can be fixed (px), relative (%, em), or auto. Min and max constraints help create responsive layouts that work across screen sizes.

Width and Height Basics

CSS

/* Fixed width and height */
.element {
  width: 300px;
  height: 200px;
}

/* Relative to parent */
.element {
  width: 50%;
  height: 100%;
}

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

/* Block elements use full available width */
div {
  width: auto;
  /* Expands to 100% of parent width */
}

Min and Max Sizing

CSS

/* Minimum width */
.element {
  min-width: 300px;
}

/* Maximum width */
.element {
  max-width: 800px;
}

/* Both together for responsive container */
.container {
  width: 100%;
  max-width: 1200px;
}

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
}

Responsive Sizing Patterns

CSS

/* Flexible container */
.container {
  width: 100%;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Responsive images */
img {
  width: 100%;
  height: auto;
}

/* Touch target minimum size */
button {
  min-width: 44px;
  min-height: 44px;
}

/* Aspect ratio constraint */
.video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Note

Use width and height to control element size. Prefer flexible sizing for responsive designs. Use max-width to constrain large screens and min-width to prevent elements from becoming too small.

Overflow handling: [overflow](/css/overflow).