isotropic-2022
Share
Blog
Search
Menu

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

By James LePage
|
Last updated on August 3rd, 2022
|

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%!

image-10-13

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.

isotropic-2022-08-03-at-12-20-37

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

The Isotropic Codex is a collection of code snippets and education for WordPress, web and WooCommerce developers.
Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram