Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now the next element we're going to target is going to be the article, so I'm going to scroll up here a little bit. So after header a.logo, let's add article, beginning and ending bracket. What we're going to do in here is set the padding. We're going to 60 pixels on the top, 20 on the right, 10 on the bottom, and 20 on the left. Let's choose File > Save. This is going to give us some padding around the content inside of the article. Let's come back out to our browser.
Let's reload our page. So no we'll see that space, that padding showing up around the article. We also have 60 pixels here at the top, because this is where we're going to position the navigation that's lower in the page, so we need to have a little bit of room between the article and the heading area. I'm going to leave the web browser open but come back to my CSS file. So after article, we're going to create another rule that's going to target the promo_container. So .promo_container, beginning and ending bracket. Here we're going to set padding as well: 0 pixels on the top, 0 on the right, 15 on the bottom, and 20 on the left.
Let's hit a return. promo_container .promo. This is going to target the individual promos inside of the promo container. Put in our brackets. Let's split that open. The first rule we're going to set inside of here is going to be our width. We're going to set that to 33%. Next, we're going to set a float of left. So these two rules combined are going to make sure that each promo is going to take up one-third of the available space, and they're going to allow our content to float to the right-hand side of each one, giving us that three-column effect. The next property for each promo, we're going to set background-position.
We're going to set zero pixels on the X and three pixels on the Y. This is going to position each one of the graphics down a couple of pixels so the top of the image will match the top of the x-height of our copy. And then we'll create one more rule: .promo_container .promo space .content. We're going to target the content divs inside of each one of the promos. What we're going to do inside of here is set padding. We're going to set 0 pixels on the top, 30 pixels on the right, 0 pixels on the bottom, and 70 pixels on the left.
This is going to make sure that the text inside of the content container doesn't get within 70 pixels of the left-hand side, so we can actually see the background-graphic showing without the type overlapping. At this point, let's hit File > Save. Let's come back over to our browser and let's hit reload. Now we'll see each of the individual promos is taking one-third of the available space. They're floating to the left of each other, giving us that column effect. And we can see that the text is now 70 pixels away from the left-hand-most edge of each individual promo, allowing us to see those background graphics.
So now with our article and promo areas styled, next we're going to start working on the styles for the navigation.
Get unlimited access to all courses for just $25/month.Become a member
119 Video lessons · 47437 Viewers
117 Video lessons · 34418 Viewers
113 Video lessons · 80289 Viewers
116 Video lessons · 70211 Viewers