CSS width Property

The width property defines the horizontal size of an element's content area.

selector { width: value; }
auto The browser calculates the width based on the content and available space.
<length> Defines the width using fixed units like px, em, rem, vw, or vh.
<percentage> Defines the width as a percentage of the parent element's width.
min-content The smallest width an element can be without the content overflowing.
max-content The ideal width for the content, often resulting in no text wrapping.
fit-content Uses the available space but caps it at the max-content value.

Code Examples

A basic fixed-width box using border-box to ensure padding doesn't increase the total width.

<div style="width: 300px; height: 100px; background-color: #3498db; color: #ffffff; padding: 20px; box-sizing: border-box;">
  This box is exactly 300px wide including padding.
</div>

An advanced example using a percentage-based width that toggles via JavaScript with a CSS transition.

<div id="dynamicBox" style="width: 50%; height: 100px; background-color: #2ecc71; transition: width 0.5s;"></div>
<button onclick="expandBox()">Expand</button>

<script>
function expandBox() {
  const box = document.getElementById("dynamicBox");
  // Check the current computed width and toggle it
  if (box.style.width === "100%") {
    box.style.width = "50%";
    box.style.backgroundColor = "#2ecc71";
  } else {
    box.style.width = "100%";
    box.style.backgroundColor = "#e74c3c";
  }
}
</script>

Pro Tip

Use the clamp() function for a fluid width that scales with the viewport but stays within a specific range. For example: width: clamp(300px, 50%, 800px);. This keeps your element from getting too small on phones or too wide on ultra-wide monitors without needing multiple media queries.

Deep Dive

By default, the width property applies to the content box. Think of it like a photograph inside a frame. The width you set is for the photo itself. If you add padding (the matting) or a border (the frame), the total size of the element grows beyond your set width. To make the width represent the entire box including the frame and matting, you should use box-sizing: border-box. This is the industry standard approach because it makes layout math much more predictable. For block-level elements, width: auto will naturally stretch to fill the container, while inline elements will only be as wide as the content they hold.

Best Practices

Don't hard-code pixel widths on main layout containers if you want a responsive site. Use percentages or max-width instead. This allows the container to shrink on mobile devices while staying at a comfortable size on desktops. Always pair width with box-sizing: border-box at the top of your stylesheet to avoid the math headache of adding padding and borders to your total width.

Common Pitfalls

The most common mistake is setting width: 100% on an element that also has padding or borders. Without border-box sizing, that element will be wider than its parent and break your layout. Another trap is trying to set a width on an inline element like a span; it won't work unless you change the display property to block or inline-block.

Accessibility

If you use fixed widths, ensure the content doesn't become clipped or unreadable when a user zooms in. Responsive widths using relative units like percentages or rems are generally better for accessibility because they adapt more gracefully to different user settings and screen sizes.

Dev Data Table: width property

default auto
animatable yes
inherited no
experimental no
year_intro 1996
year_standard 1996
js_syntax_1 element.style.width = "300px";
js_syntax_2 element.style.setProperty("width", "300px");
js_note When reading the width property, element.style.width only returns inline styles; use getComputedStyle(element).width for the actual rendered value.
browsers { "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1, "Opera": 3.5, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10 }
results render here...