For my brother-in-law’s website I came across a layout issue that I resolved by using the ‘calc’ tag. I had a row that had three sections. The middle section contained images that did not resize and thus was to be a static width at all times. The left and right sections contained text and their widths would be dynamic, resizing depending on the width of the browser window.
Fortunately when looking at some CSS code a week or so ago I came across the ‘calc’ function and this was the perfect opportunity for me to try it for the first time. So, we know the following:
- The width of the entire row is 100%
- The middle section’s width is 500px
So now what is the width for the left and right sections should be:
((100% – 500px) / 2)
So when including this in my CSS my code was:
width: calc((100%-500px) /2);
Very easy solution. I’ll even be 100% upfront and admit I messed up the algebra on this on my first attempt, but I soon got it right. This is a very nice feature and I’m happy that I was able to recall it and use it successfully.