- 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.