totn CSS

CSS: width property

This CSS tutorial explains how to use the CSS property called width with syntax and examples.

Description

The CSS width property defines the width of the content area of an element.

Syntax

The syntax for the width CSS property is:

width: value;

Parameters or Arguments

value

The width of the content area of an element. It can be one of the following:

Value Description
fixed Fixed value expressed in pixels, em's, etc.
div { width: 150px; }
div { width: 50em; }
percentage Percentage value
div { width: 100%; }
auto Browser will calculate the width for the element
div { width: auto; }
inherit Element will inherit the width from its parent element
div { width: inherit; }

Note

  • The content area of an element is inside the padding, border, and margin of the element.
  • The CSS width property applies to block level and replaced elements.
  • When the value is provided as a percentage, it is relative to the width of the containing block.
  • See also height, max-height, max-width, min-height, min-width.

Browser Compatibility

The CSS width property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the width property below, exploring examples of how to use this property in CSS.

Using Fixed Value

Let's look at a CSS width example where we have provided the width as a fixed value expressed in pixels.

div { width: 200px; }

In this CSS width example, we have set the <div> tag to a width of 200px.

We can also express the width as a fixed value in em's.

div { width: 175em; }

In this CSS width example, we have set the <div> tag to a width of 175em.

Using Percentage

Let's look at a CSS width example where we have provided the width as a percentage.

div { width: 90% }

In this CSS width example, we have set the width of the <div> to 90%.

Using auto

Let's look at a CSS width example where we have used auto as the width value.

div { width: auto; }

In this CSS width example, the browser will calculate the width of the <div>.

Share on: