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 take a look at visually dividing HTML elements without adding extra code to our HTML file. Now, 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. Now once you have the HTML file open, you'll see up in the head area we have a link to style.css, which we'll be opening in a few minutes. And then, in the body area, we have a main article, and then inside of the article, we have an H1, and we have three aside elements.
So what we're going to be doing is floating these aside elements to create our columns, and then creating dividers between the columns, again, without adding any HTML to this page. And to preview the layout we're going to be working with, you can open this index.html file up in a browser. And now, at this point, let's go back to the exercise files. Let's find style.css. Let's open this in our text editor. Let's scroll down to the bottom and let's first start by setting those aside elements to float so we can create our columns.
So after this rule here, which is adding a pseudo element to the article element, let's hit a few returns. Let's type article space aside. This will target all of the aside elements. Let's come in here and set a width to 33% and a semicolon. Next line, let's come in here and set a float property to left. With that in place you can hit save.
Reload in the browser. You'll now see that we have all of our aside elements lining up. Back to the CSS, let's hit a few returns. And now back over to the CSS, let's come in here and divide these with a border. So let's go back into the article space aside. Let's come in here and add a border dash left property. We'll use shorthand style here so the first property is going to be the size. So I'll set this to one pixel, then a space. Next is the style.
We'll set that to solid, then a space. Then we'll use a semi-transparent white. So we'll use the RGBA color space, put in our parentheses, semicolon. 255 for red inside of the parentheses, 255 for green, comma, 255 for blue, and then .2 for the alpha setting. With this in place, I'll hit save. Reload in the browser. We'll now see we have our border left on each one of the aside elements.
And then next let's come in here and set some padding properties so that the text doesn't touch the borders and we get a little more space. So for padding, we're going to set zero on the top, 20 pixels on the right, zero on the bottom, and 30 pixels on the left. So with that in place, we'll hit save. Go back to the browser, hit reload. What we'll notice right away is that the third aside element is now breaking on a new line. So what's happening here is the padding property here with 20 pixels on the right and 30 on the left is adding 50 pixels to the width, which is set to 33.
Which makes these greater than one third. So we don't have room for three aside elements that are greater than 33%, which is why the last one is going to the next line. So to make sure that the padding does not add to the overall size of the aside, what we can do is set a box sizing property. So after padding, let's come in here and hit a return. We'll type box dash sizing, space, and we're going to set this to border box, which basically means that the width will always be 33%, regardless of how much padding we put on the right and left sides of the element.
So with that in place, let's hit save. We go back to the browser. And we'll now see that all of the aside elements fit on one line. So now we need to turn off the border left of the first aside element. So back to our CSS. Create a new rule, article space aside. Then a colon, then we're going to type first dash of dash type. Put in our brackets.
Add the property of border left. We'll set this to none. Hit save, reload in the browser, and now we only have the second and third aside elements with the border left showing up. So now the final change I want to make is I want the dividers to be even with the text and I want the headings to be above the dividers. So in our CSS, let's scroll up. Let's find our H2 element, and what I want to do is set a margin top property to a negative number, so that the headings will sit sort of above all of the other elements in the aside.
Now to figure out the size that we need to set this to, we have a font size set to 1.3ms, and we have a margin bottom set to .5ms. So the .5ms is the space underneath and the 1.3 is the overall size of the text. So what we're going to do is add 1.3 plus .5, giving us 1.8. So let's come in here to the margin top property and set this to negative 1.8ms. So now we'll save our file.
Go back to the browser, hit reload. And now we'll see that the headings are all shifted vertically and the borders will now align with the paragraph elements inside of the asides. So now we have a nice visual divider between all of our columns using nothing more than CSS. Now if you'd like to learn more about creating columns and even adding images to them with CSS, check out chapter two of creating a responsive web design, which is also available here in the library. And so with that, I'll conclude this episode. And as always, thanks for watching.