How To: 1/3 of 100% (33.333...%) In CSS

In this resource, we'll show how to easily specify 1/3 width in CSS.

Say you want three columns within a container.

Typically, people will write 33% into each child element. However 33% * 3 comes out to be 99%, not 100%!

On higher resolution screen, this 1% gap can become very apparent.

A common fix to this problem is to type in decimals. width:33.33% instead of just 33%.

However, in 2024, there's a better way - using the calc CSS api.

Calc is supported by all major browsers and commonly used.

The best way to represent 1/3 or 33.33333333...% is to simply calculate it within the browser like so:

.column-one-third { width: 33.33%; width: calc(100%/3); }

Note the width:33.33%. This is a fallback for very outdated browsers that don't support this standard.

But realistically, virtually every single browser in use today will support using calc() as a CSS unit value.