Note: There will be free exercise files for most episodes, which will allow you to follow along with author Chris Converse, as you explore all the possibilities CSS has to offer.
Skill Level Intermediate
- Hi, this is Chris Converse. And in this episode we'll use the calculation function of CSS in order to dynamically change the width of one column in our layout, while the other column remains at a fixed size. And will even allow for spacing between our columns without having to resort to using padding properties. So if you'd like to follow along with me, download the exercise files and let's begin by opening index.html in a text editor. And once you have the html file open, you'll see that we have a main element here. Inside we have an article element and an aside element.
And you can also preview this in a browser to see the layout we're starting with. And so to create our columns we'll go back to the exercise files. Let's open style.css up in our text editor. Let's scroll down to the bottom, after our main with our pseudo element. Let's come down here a few lines and let's target the article. So type article, space. Put in our beginning and ending brackets. First thing we'll do is set a width here and then we'll set a float property.
So set a width of 300 pixels. Semi-colon, space Then we're going to set a float property to left. And if you preview this in a browser, you'll see that the aside is now wrapping up next to the article element with that float property. So now we're going to set a float property on the aside. So let's go back into our CSS. Let's duplicate this role. Let's change article to aside. Let's change the width to 200 pixels and we're going to set the float to right, instead of left.
So with these properties in place, we'll now have our columns. However, if I resize the browser you'll see that the columns are fixed, leaving a gap on larger screens and stacking the elements on smaller screens even if there's enough room to fit both. Now if we set both values to percentages, they'll both be resizing. So what we want to do is use a calculation to set the width of the article and leave the aside at 200 pixels. So to do this, back in our CSS file let's find the width property. Let's come in here and change the value from 300 pixels to calc, C-A-L-C, beginning and ending parenthesis, keep the semi-colon, and then inside the parenthesis we're going to perform our calculation.
So we'll start by setting 100 percent, so the article's width will be calculated from its parent container, which is the main element. Then a space, then we're going to subtract the 200 pixel width of the aside. So 100 percent minus 200 pixels is what we're calculating inside the parenthesis. And now back in the browser you'll see that the article element is being resized and the aside element has a fixed width. And now to get a little more space between our columns, we can simply subtract a few more pixels from the calculation.
So to give us a 40 pixel gap between the article and the aside, we'll come back into the calculation for article, let's change 200 to 240 pixels. And now back in the browser we'll see that we'll always have a 40 pixel space between the two columns regardless of the browser's width. And so now we have an element in our layout in which the width is being dynamically calculated. Allowing us to create layouts without needing extra html, or using CSS margin and padding properties.
And so with that, I'll conclude this episode. And as always, thanks for watching.