1
00:00:00.05 --> 00:00:02.07
- Hi, this is Chris Converse,

2
00:00:02.07 --> 00:00:04.03
and in this episode, we'll take a look at

3
00:00:04.03 --> 00:00:06.06
visually dividing HTML elements

4
00:00:06.06 --> 00:00:09.06
without adding extra
code to our HTML file.

5
00:00:09.06 --> 00:00:11.07
Now, if you'd like to
follow along with me,

6
00:00:11.07 --> 00:00:13.08
download the exercise
files, and let's begin

7
00:00:13.08 --> 00:00:17.02
by opening index.html in a text editor.

8
00:00:17.02 --> 00:00:20.00
Now once you have the HTML file open,

9
00:00:20.00 --> 00:00:21.06
you'll see up in the head area

10
00:00:21.06 --> 00:00:24.00
we have a link to style.css,

11
00:00:24.00 --> 00:00:26.00
which we'll be opening in a few minutes.

12
00:00:26.00 --> 00:00:27.06
And then, in the body area,

13
00:00:27.06 --> 00:00:30.03
we have a main article, and then inside

14
00:00:30.03 --> 00:00:32.02
of the article, we have an H1,

15
00:00:32.02 --> 00:00:34.09
and we have three aside elements.

16
00:00:34.09 --> 00:00:36.08
So what we're going to be doing is

17
00:00:36.08 --> 00:00:38.06
floating these aside elements

18
00:00:38.06 --> 00:00:39.08
to create our columns,

19
00:00:39.08 --> 00:00:42.03
and then creating dividers
between the columns,

20
00:00:42.03 --> 00:00:45.03
again, without adding
any HTML to this page.

21
00:00:45.03 --> 00:00:47.00
And to preview the layout we're going

22
00:00:47.00 --> 00:00:48.03
to be working with, you can open

23
00:00:48.03 --> 00:00:51.02
this index.html file up in a browser.

24
00:00:51.02 --> 00:00:52.03
And now, at this point,

25
00:00:52.03 --> 00:00:54.00
let's go back to the exercise files.

26
00:00:54.00 --> 00:00:56.03
Let's find style.css.

27
00:00:56.03 --> 00:00:58.01
Let's open this in our text editor.

28
00:00:58.01 --> 00:01:01.02
Let's scroll down to the bottom

29
00:01:01.02 --> 00:01:02.09
and let's first start by setting

30
00:01:02.09 --> 00:01:04.05
those aside elements to float

31
00:01:04.05 --> 00:01:06.07
so we can create our columns.

32
00:01:06.07 --> 00:01:08.07
So after this rule here, which is adding

33
00:01:08.07 --> 00:01:11.02
a pseudo element to the article element,

34
00:01:11.02 --> 00:01:15.08
let's hit a few returns.

35
00:01:15.08 --> 00:01:19.06
Let's type article space aside.

36
00:01:19.06 --> 00:01:23.00
This will target all
of the aside elements.

37
00:01:23.00 --> 00:01:25.09
Let's come in here and set a width

38
00:01:25.09 --> 00:01:29.08
to 33% and a semicolon.

39
00:01:29.08 --> 00:01:31.00
Next line, let's come in here

40
00:01:31.00 --> 00:01:36.02
and set a float property to left.

41
00:01:36.02 --> 00:01:37.07
With that in place you can hit save.

42
00:01:37.07 --> 00:01:38.09
Reload in the browser.

43
00:01:38.09 --> 00:01:40.01
You'll now see that we have all

44
00:01:40.01 --> 00:01:44.00
of our aside elements lining up.

45
00:01:44.00 --> 00:01:47.02
Back to the CSS, let's hit a few returns.

46
00:01:47.02 --> 00:01:49.03
And now back over to the CSS,

47
00:01:49.03 --> 00:01:52.01
let's come in here and
divide these with a border.

48
00:01:52.01 --> 00:01:55.02
So let's go back into
the article space aside.

49
00:01:55.02 --> 00:02:00.06
Let's come in here and add
a border dash left property.

50
00:02:00.06 --> 00:02:01.07
We'll use shorthand style here

51
00:02:01.07 --> 00:02:04.01
so the first property
is going to be the size.

52
00:02:04.01 --> 00:02:07.01
So I'll set this to one
pixel, then a space.

53
00:02:07.01 --> 00:02:08.06
Next is the style.

54
00:02:08.06 --> 00:02:11.08
We'll set that to solid, then a space.

55
00:02:11.08 --> 00:02:15.00
Then we'll use a semi-transparent white.

56
00:02:15.00 --> 00:02:17.05
So we'll use the RGBA color space,

57
00:02:17.05 --> 00:02:20.09
put in our parentheses, semicolon.

58
00:02:20.09 --> 00:02:23.07
255 for red inside of the parentheses,

59
00:02:23.07 --> 00:02:27.05
255 for green, comma, 255 for blue,

60
00:02:27.05 --> 00:02:29.08
and then .2 for the alpha setting.

61
00:02:29.08 --> 00:02:31.09
With this in place, I'll hit save.

62
00:02:31.09 --> 00:02:33.01
Reload in the browser.

63
00:02:33.01 --> 00:02:35.00
We'll now see we have our border left

64
00:02:35.00 --> 00:02:40.03
on each one of the aside elements.

65
00:02:40.03 --> 00:02:41.05
And then next let's come in here and

66
00:02:41.05 --> 00:02:42.09
set some padding properties so that

67
00:02:42.09 --> 00:02:44.07
the text doesn't touch the borders

68
00:02:44.07 --> 00:02:47.06
and we get a little more space.

69
00:02:47.06 --> 00:02:50.01
So for padding, we're going
to set zero on the top,

70
00:02:50.01 --> 00:02:53.02
20 pixels on the right,
zero on the bottom,

71
00:02:53.02 --> 00:02:55.04
and 30 pixels on the left.

72
00:02:55.04 --> 00:02:57.04
So with that in place, we'll hit save.

73
00:02:57.04 --> 00:03:00.01
Go back to the browser, hit reload.

74
00:03:00.01 --> 00:03:01.07
What we'll notice right away is that

75
00:03:01.07 --> 00:03:03.09
the third aside element is now breaking

76
00:03:03.09 --> 00:03:05.06
on a new line.

77
00:03:05.06 --> 00:03:08.03
So what's happening here
is the padding property

78
00:03:08.03 --> 00:03:10.04
here with 20 pixels on the right

79
00:03:10.04 --> 00:03:13.01
and 30 on the left is adding 50 pixels

80
00:03:13.01 --> 00:03:15.07
to the width, which is set to 33.

81
00:03:15.07 --> 00:03:18.01
Which makes these greater than one third.

82
00:03:18.01 --> 00:03:20.03
So we don't have room
for three aside elements

83
00:03:20.03 --> 00:03:22.02
that are greater than 33%, which is why

84
00:03:22.02 --> 00:03:24.04
the last one is going to the next line.

85
00:03:24.04 --> 00:03:26.00
So to make sure that the padding does not

86
00:03:26.00 --> 00:03:28.07
add to the overall size of the aside,

87
00:03:28.07 --> 00:03:31.07
what we can do is set
a box sizing property.

88
00:03:31.07 --> 00:03:33.03
So after padding, let's come in here

89
00:03:33.03 --> 00:03:35.02
and hit a return.

90
00:03:35.02 --> 00:03:38.04
We'll type box dash sizing, space,

91
00:03:38.04 --> 00:03:41.00
and we're going to set this to border box,

92
00:03:41.00 --> 00:03:43.01
which basically means that the width

93
00:03:43.01 --> 00:03:45.05
will always be 33%, regardless of

94
00:03:45.05 --> 00:03:47.04
how much padding we put on the right

95
00:03:47.04 --> 00:03:50.01
and left sides of the element.

96
00:03:50.01 --> 00:03:52.01
So with that in place, let's hit save.

97
00:03:52.01 --> 00:03:53.03
We go back to the browser.

98
00:03:53.03 --> 00:03:54.07
And we'll now see that all of the

99
00:03:54.07 --> 00:03:56.09
aside elements fit on one line.

100
00:03:56.09 --> 00:03:58.06
So now we need to turn off the border left

101
00:03:58.06 --> 00:04:01.04
of the first aside element.

102
00:04:01.04 --> 00:04:03.07
So back to our CSS.

103
00:04:03.07 --> 00:04:09.02
Create a new rule, article space aside.

104
00:04:09.02 --> 00:04:11.09
Then a colon, then we're going to type

105
00:04:11.09 --> 00:04:16.07
first dash of dash type.

106
00:04:16.07 --> 00:04:21.07
Put in our brackets.

107
00:04:21.07 --> 00:04:24.02
Add the property of border left.

108
00:04:24.02 --> 00:04:25.07
We'll set this to none.

109
00:04:25.07 --> 00:04:27.09
Hit save, reload in the browser,

110
00:04:27.09 --> 00:04:29.08
and now we only have the second and third

111
00:04:29.08 --> 00:04:33.00
aside elements with the
border left showing up.

112
00:04:33.00 --> 00:04:34.07
So now the final change I want to make is

113
00:04:34.07 --> 00:04:38.00
I want the dividers to
be even with the text and

114
00:04:38.00 --> 00:04:42.01
I want the headings to
be above the dividers.

115
00:04:42.01 --> 00:04:45.02
So in our CSS, let's scroll up.

116
00:04:45.02 --> 00:04:47.06
Let's find our H2 element,

117
00:04:47.06 --> 00:04:50.02
and what I want to do is set a margin

118
00:04:50.02 --> 00:04:52.08
top property to a negative number,

119
00:04:52.08 --> 00:04:54.05
so that the headings will sit sort of

120
00:04:54.05 --> 00:04:58.00
above all of the other
elements in the aside.

121
00:04:58.00 --> 00:04:59.06
Now to figure out the size that we

122
00:04:59.06 --> 00:05:00.05
need to set this to,

123
00:05:00.05 --> 00:05:04.00
we have a font size set to 1.3ms,

124
00:05:04.00 --> 00:05:07.07
and we have a margin bottom set to .5ms.

125
00:05:07.07 --> 00:05:10.06
So the .5ms is the space underneath

126
00:05:10.06 --> 00:05:13.09
and the 1.3 is the
overall size of the text.

127
00:05:13.09 --> 00:05:16.05
So what we're going to do is add 1.3

128
00:05:16.05 --> 00:05:20.04
plus .5, giving us 1.8.

129
00:05:20.04 --> 00:05:21.06
So let's come in here to the margin

130
00:05:21.06 --> 00:05:26.05
top property and set
this to negative 1.8ms.

131
00:05:26.05 --> 00:05:28.03
So now we'll save our file.

132
00:05:28.03 --> 00:05:30.04
Go back to the browser, hit reload.

133
00:05:30.04 --> 00:05:32.00
And now we'll see that the headings

134
00:05:32.00 --> 00:05:34.00
are all shifted vertically and the

135
00:05:34.00 --> 00:05:35.02
borders will now align with the

136
00:05:35.02 --> 00:05:38.05
paragraph elements inside of the asides.

137
00:05:38.05 --> 00:05:40.06
So now we have a nice visual divider

138
00:05:40.06 --> 00:05:42.03
between all of our columns using

139
00:05:42.03 --> 00:05:44.03
nothing more than CSS.

140
00:05:44.03 --> 00:05:45.07
Now if you'd like to learn more about

141
00:05:45.07 --> 00:05:46.09
creating columns and even adding

142
00:05:46.09 --> 00:05:48.09
images to them with CSS,

143
00:05:48.09 --> 00:05:50.03
check out chapter two of

144
00:05:50.03 --> 00:05:52.00
creating a responsive web design,

145
00:05:52.00 --> 00:05:54.03
which is also available
here in the library.

146
00:05:54.03 --> 00:05:56.05
And so with that, I'll
conclude this episode.

147
00:05:56.05 --> 00:05:59.05
And as always, thanks for watching.