How Percentages Work for Width Calculations in a Responsive Website

Many students of responsive web design have a difficult time using percentages for width values. Specifically, there is confusion with how the browser calculates those percentages. Below you'll find a detailed explanation of how percentages work for width calculations in a responsive website. 

Using Pixels for Width Values

When you use pixels as a width value, the results are very straightforward. If you use CSS to set the width value of an element in the header of a document to 100 pixels wide, that element will be the same size as one that you set to 100 pixels wide in the website's content or footer or other areas of the page. Pixels are an absolute value, so 100 pixels is 100 pixels no matter where in your document an element appears. Unfortunately, while pixel values are easy to understand, they do not work well with responsive websites.

Ethan Marcotte coined the term “responsive web design”, explaining this approach as containing 3 key principals:

1. A fluid grid
2. Fluid media
3. Media queries

Those first two points, a fluid grid, and fluid media are achieved by using percentages, instead of pixels, for sizing values.

Using Percentages for Width Values

When you use percentages to establish a width for an element, the actual size that element displays will vary depending on where it is in the document. Percentages are a relative value, meaning the size displayed is relative to other elements in your document.

For instance, if you set the width of an image to 50%, this does not mean that the image will display at half of its normal size. This is a common misconception.

If an image is actually 600 pixels wide, then using a CSS value to display it at 50% does not mean that it will be 300 pixels wide in the web browser. This percentage value is calculated based on the element that contains that image, not the actual size of the image itself. If the container (which could be a division or some other HTML element) is 1000 pixels wide, then the image will display at 500 pixels since that value is 50% of the container’s width. If the containing element is 400 pixels wide, then the image will only display at 200 pixels, since that value is 50% of the container. The image in question here has a 50% size which depends completely on the element which contains it.

Remember, responsive design is fluid. Layouts and sizes will change as the screen size/device changes. If you think about this in physical, non-web terms, it is like having a cardboard box that you are filling with packing material. If you say that the box should be half filled with that material, the amount of packing you need will vary depending on the size of the box. The same holds true for percentage widths in web design.

Percentages Based on Other Percentages 

In the image/container example, we used pixel values for the containing element to show how the responsive image would display. In reality, the containing element would also be set as a percentage and the image, or other elements, inside that container, would get their values based on a percentage of a percentage.

Here’s another example.

Say you have a website where the entire site is contained within a division with a class of “container” (a common web design practice). Inside that division are three other divisions that you will eventually style to display as 3 vertical columns.

Now, you may use CSS to set the size of that “container” division to say 90%. In this example, the container division does not have another element that surrounds it other than the body, which we have not set to any specific value. By default, the body will render as 100% of the browser window. Therefore, the “container” division’s percentage will be based on the size of the browser window. As that browser window changes in size, so will the size of this “container”. So if the browser window is 2000 pixels wide, this division will display at 1800 pixels. This is calculated as 90-percent of 2000 (2000 x .90 = 1800)), which is the size of the browser.

If each one of the “col” divisions found within the “container” is set to a size of 30%, then each of them will be 540 pixels wide in this example. This is calculated as 30% of the 1800 pixels that the container renders at (1800 x .30 = 540). If we changed the percentage of that container, these inner divisions would also change in the size they render at since they are dependent on that container element.

Let’s assume that the browser windows remain at 2000 pixels wide, but we change the percentage value of the container to 80% instead of 90%. That means that it will render at 1600 pixels wide now (2000 x .80 = 1600). Even if we do not change the CSS for the size of our 3 “col” divisions, and leave them at 30%, they will render differently now since their containing element, which is the context that they are sized by, has changed. Those 3 divisions will now render as 480 pixels wide each, which is 30% of 1600, or the size of the container 1600 x .30 = 480).

Taking this even further, if there was an image inside one of these “col” divisions and that image was sized using a percentage, the context for its sizing would be the “col” itself. As that “col” division changed in size, so would the image inside it. So if the size of the browser or the “container” changed, that would affect the three “col” divisions, which would, in turn, change the size of the image inside the “col.” As you can see, these are all connected when it comes to percentage-driven sizing values.

When you consider how an element inside of a web page will render when a percentage value is used for its width, you need to understand the context in which that element resides in the page’s markup.

In Summary

Percentages play a critical role in creating the layout for responsive websites. Whether you are sizing images responsively or using percentage widths to make a truly fluid grid whose sizes are relative to each other, understanding these calculations will be necessary to achieve the look you desire.