From the course: Creating a Responsive Web Design

Unlock this course with a free trial

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

Setting up a three-column row

Setting up a three-column row - CSS Tutorial

From the course: Creating a Responsive Web Design

Start my 1-month free trial Buy for my team

Setting up a three-column row

“

- Now we're going to style the content inside of the section with the class of "main," which is these three items here: "What's trending," "Where to find it," and "Tools of the trade." These also have the SPG graphics above them. So let's go back to our CSS file. Let's scroll down. Let's add another CSS comment here. We'll call this section, Main. Now we're going to copy and paste this up here because we're going to have the section All as well. So we'll define some properties that will be used by all sections, and then some properties that will be used by just the Main section. So, let's start under section All. Let's come in here and let's target the section element, put in our brackets, and we're going to set a padding property. We're going to set zero on the top and bottom, then a space, and then 30 pixels on the right and left. This way, any content we put inside of any one of the sections won't touch the edge of the page element. There'll be 30 pixels on the right and left. Now,…

Contents