Percentages can be used with many, but not all, of the possible properties when setting up styles for your web site. Percentages are gaining in usage and importance because of that ever expanding range of screen sizes and responsive web design.

Using percentages can be tricky. You must understand how they are being applied. They are always a percentage of the containing element or they are a percentage of the initial value of that property. They are relative to another value.

Percentages and generally used with these CSS Properties:

  • width
  • height
  • line-height

How percentages are applied

Percentages should be an number followed by a percent sign (%). Here is an example of a percentage being applied to an element:

#rightcol {width: 26.0417%}

In this example, any element with the id of rightcol will take up 26.0417% of the CONTAINING element. If #rightcol is contained within a div with the id of container, and the container is 960px wide, the #rightcol element will take up 250px. If the container has a width of 95% of the containing element of <body>, it will shrink in width as the screen size or browser window size is reduced. The element #rightcol will reduce in size accordingly.