From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Calc it, fix it, and forget it

Calc it, fix it, and forget it - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Calc it, fix it, and forget it

“

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

Contents