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