Percentage minus pixels in responsive design

SASS and LESS users know just how easy it is to create a simple calculation in their CSS. One feature of both is the ability to perform operations, take for instance the following:

.wrap nav .navitem { width: 900px / 3; }

Which after compiling becomes:

.wrap nav .navitem { width: 300px; }

Pretty simple trick, although, this particular example is not very useful.

I can’t be the only person who thought of trying a percentage minus pixels calculation. I mean, how cool would this be?

.wrap nav .navitem { width: 33% - 200px; )

In this hypothetical example, the .navitem element would have a width equal 33% of its parent’s element, minus 200 pixels. This could be incredibly useful where you have a 200 pixel wide image (like a logo), and you want three objects (such as links) to take up equal parts in the remaining space. Unfortunately, this can not be done in SASS or LESS, and it’s obvious why. SASS and LESS get compiled into CSS, meaning they have the same limitations as CSS. As we know CSS cannot perform operations, let alone operations with two different base values, and so it’s up to another solution.

Percentage minus pixels with Javascript

Since CSS can’t perform operations, one way to perform this is to use JavaScript, which can make these calculations. First get the total width available, subtract 200 pixels for the image, and divide it all by three. The gist of the JavaScript (using jQuery) is below:

var $wrap = $(".wrap");
var $navitem = $(".wrap nav .navitem");

$(window).resize(function(){

  var totalWidth = $wrap.width();
  var calcWidth = (totalWidth - 200) / 3;
  $navitem.width(calcWidth);

});

Here’s a Codepen to show it in action:

See the Pen Percentage minus width (JS) by Jameel Bokhari (@jbokhari) on CodePen.

A little choppy, but it gets the job done. One problem here is that using media queries is impossible; you would have to make additions to the JavaScript to handle screen sizes. I enjoy writing JavaScript snippets like this, but something about it irks me. Whenever possible, I’d rather create a pure CSS solution.

Percentage minus pixels with pure CSS

In the end, the solution is so simple, and yet in my two-and-a-half years of professional web design, I could not have told you what it was until very recently. Seeing is believing, so check out the modified Codepen example below. It looks exactly the same but uses only CSS (Note: to be clear the embedded code does in fact look different, but outside of the iframes they look the same):

See the Pen Percentage minus width (JS) by Jameel Bokhari (@jbokhari) on CodePen.


In this example the <nav> element has overflow: hidden; applied. Each nav item then has a width of 33%.  And that’s it.

The logo floats left, so inline elements —the nav element in this example—adhere to the remaining space, unless they are set to clear. In this situation, setting overflow to hidden actually causes the nav element to conform entirely to the remaining space without spilling over into the floated item’s space. With that in place, inner elements are given a percentage width, which is a percentage of the total area, minus the floating item’s width.

  • me

    helping tutorial