1
00:00:00.07 --> 00:00:02.02
- [Voiceover] Hi. This is Chris Converse

2
00:00:02.02 --> 00:00:03.06
and in this episode,

3
00:00:03.06 --> 00:00:05.08
we'll be exploring using
CSS Float properties

4
00:00:05.08 --> 00:00:08.01
to create a text wrap
around a photo and caption,

5
00:00:08.01 --> 00:00:11.09
as well as create a column
layout within our web page.

6
00:00:11.09 --> 00:00:13.06
Now if you'd like to follow along with me,

7
00:00:13.06 --> 00:00:15.01
download the Exercise Files,

8
00:00:15.01 --> 00:00:16.06
which includes a basic web layout

9
00:00:16.06 --> 00:00:18.04
that we can all start
from, and we'll begin

10
00:00:18.04 --> 00:00:22.09
by opening the index.html
file in a text editor.

11
00:00:22.09 --> 00:00:24.06
Now inside of the html element,

12
00:00:24.06 --> 00:00:26.05
inside of the body area,

13
00:00:26.05 --> 00:00:31.00
we have a header and a main section.

14
00:00:31.00 --> 00:00:32.06
Inside of this main section here

15
00:00:32.06 --> 00:00:35.06
we have an article element,

16
00:00:35.06 --> 00:00:37.09
and an aside element.

17
00:00:37.09 --> 00:00:40.00
We also have some content
that follows the aside.

18
00:00:40.00 --> 00:00:42.02
We'll look at clearing the float later on.

19
00:00:42.02 --> 00:00:45.05
And then inside of the article
we have a figure element.

20
00:00:45.05 --> 00:00:46.07
Now if you'd like to preview this page

21
00:00:46.07 --> 00:00:49.06
you can open the index.html
file up in a browser.

22
00:00:49.06 --> 00:00:52.09
My particular text editor has
a preview, so I'll use that.

23
00:00:52.09 --> 00:00:53.07
And here we can see

24
00:00:53.07 --> 00:00:57.03
that this page is basically
a single column of content.

25
00:00:57.03 --> 00:01:00.05
So the figure element in caption
is this element right here.

26
00:01:00.05 --> 00:01:01.08
And so the first thing we're going to do

27
00:01:01.08 --> 00:01:03.00
is open up the CSS file

28
00:01:03.00 --> 00:01:05.09
and assign a float property to the figure.

29
00:01:05.09 --> 00:01:07.08
So let's go back to the exercise files,

30
00:01:07.08 --> 00:01:09.05
let's find style.css,

31
00:01:09.05 --> 00:01:13.01
let's open this up in our text editor.

32
00:01:13.01 --> 00:01:15.00
And if we scroll down
here I put a comment.

33
00:01:15.00 --> 00:01:16.07
We're going to be editing all of the items

34
00:01:16.07 --> 00:01:18.06
below this particular comment.

35
00:01:18.06 --> 00:01:21.03
So let's start with the
figure element here.

36
00:01:21.03 --> 00:01:22.08
So let's add a rule.

37
00:01:22.08 --> 00:01:25.07
So after the margin
property let's hit a return.

38
00:01:25.07 --> 00:01:29.02
Let's type "float, colon, space"

39
00:01:29.02 --> 00:01:31.08
then we'll type in the word
right, then a semicolon.

40
00:01:31.08 --> 00:01:32.09
As soon as we do that,

41
00:01:32.09 --> 00:01:34.06
we'll now see that the figure element,

42
00:01:34.06 --> 00:01:37.08
as well as the image and
figure caption inside,

43
00:01:37.08 --> 00:01:39.09
are all now floating over to the right.

44
00:01:39.09 --> 00:01:41.07
And what this does is allows the browser

45
00:01:41.07 --> 00:01:43.02
to take the next element,

46
00:01:43.02 --> 00:01:44.09
which in this case is
this paragraph element,

47
00:01:44.09 --> 00:01:48.06
and allow this to follow
the item before it,

48
00:01:48.06 --> 00:01:51.04
and the figure element now
with it's float property

49
00:01:51.04 --> 00:01:53.03
now moves out of the way.

50
00:01:53.03 --> 00:01:55.07
And this is a very similar
technique to using text wrap

51
00:01:55.07 --> 00:01:59.07
inside a lot of page layout applications.

52
00:01:59.07 --> 00:02:02.02
So let's come back to the figure element.

53
00:02:02.02 --> 00:02:06.05
Instead of float right, let's
change this to float left.

54
00:02:06.05 --> 00:02:07.08
And now the figure element floats

55
00:02:07.08 --> 00:02:09.02
to the left-hand side of the screen,

56
00:02:09.02 --> 00:02:12.09
allowing the text to flow
around the right-hand side.

57
00:02:12.09 --> 00:02:13.07
So with this in place

58
00:02:13.07 --> 00:02:15.08
let's come back and
modify some properties.

59
00:02:15.08 --> 00:02:17.01
So we have a margin property here.

60
00:02:17.01 --> 00:02:19.08
We have a margin of 10
pixels on the top and bottom

61
00:02:19.08 --> 00:02:22.01
and zero on the right and left.

62
00:02:22.01 --> 00:02:24.04
Let's come in here and change these.

63
00:02:24.04 --> 00:02:26.04
And for the first property, which is top,

64
00:02:26.04 --> 00:02:28.01
we're going to set this to five pixels

65
00:02:28.01 --> 00:02:29.02
just to move this down a little bit

66
00:02:29.02 --> 00:02:31.02
to line up with the type.

67
00:02:31.02 --> 00:02:32.02
Then a space.

68
00:02:32.02 --> 00:02:35.03
For the right we're
going to use 24 pixels.

69
00:02:35.03 --> 00:02:37.03
For the bottom I'm going to set 12 pixels,

70
00:02:37.03 --> 00:02:40.01
and for the left we'll set zero.

71
00:02:40.01 --> 00:02:42.01
So now we can see we have
some nice negative space

72
00:02:42.01 --> 00:02:44.01
on the right-hand side of this element,

73
00:02:44.01 --> 00:02:47.01
and some space underneath as well.

74
00:02:47.01 --> 00:02:48.03
So if we resize the browser

75
00:02:48.03 --> 00:02:49.09
we can sort of get a visual sense

76
00:02:49.09 --> 00:02:53.03
of the padding we've added
around this particular element.

77
00:02:53.03 --> 00:02:54.07
Now to create some columns

78
00:02:54.07 --> 00:02:56.00
we're going to add some float properties

79
00:02:56.00 --> 00:03:00.02
to both the article
and the aside elements.

80
00:03:00.02 --> 00:03:02.05
So let's find the article here.

81
00:03:02.05 --> 00:03:03.09
Let's hit a return.

82
00:03:03.09 --> 00:03:06.02
First we're going to need
to set a width property,

83
00:03:06.02 --> 00:03:10.05
so we're going to set the width to 57%.

84
00:03:10.05 --> 00:03:11.09
Then hit a return.

85
00:03:11.09 --> 00:03:17.01
And then next we'll set a
float property, so type float

86
00:03:17.01 --> 00:03:20.00
and then we'll set this
to left and a semicolon.

87
00:03:20.00 --> 00:03:21.04
Now once we do that the
layout's going to start

88
00:03:21.04 --> 00:03:23.02
to look a little bit messy here.

89
00:03:23.02 --> 00:03:26.05
What's happening is we have
set the article width to 57%

90
00:03:26.05 --> 00:03:28.09
with a float left, and
now the other elements

91
00:03:28.09 --> 00:03:31.05
are now floating up toward
the right-hand side.

92
00:03:31.05 --> 00:03:32.08
So don't worry yet because we need

93
00:03:32.08 --> 00:03:35.00
to add float properties
to the aside element

94
00:03:35.00 --> 00:03:37.03
to correct this.

95
00:03:37.03 --> 00:03:39.07
So let's come down to the aside.

96
00:03:39.07 --> 00:03:41.05
Let's hit a return.

97
00:03:41.05 --> 00:03:43.03
Let's set a width property here.

98
00:03:43.03 --> 00:03:46.04
We're going to set this to 30%,

99
00:03:46.04 --> 00:03:47.08
then a semicolon.

100
00:03:47.08 --> 00:03:50.05
Next line, we're going to
set a float property here

101
00:03:50.05 --> 00:03:53.04
to left as well, so this will now float up

102
00:03:53.04 --> 00:03:56.01
toward the left-hand side
of the article element.

103
00:03:56.01 --> 00:03:57.03
Now we'll see that the columns

104
00:03:57.03 --> 00:04:00.00
are starting to work a little bit better.

105
00:04:00.00 --> 00:04:01.00
So now let's come up

106
00:04:01.00 --> 00:04:03.02
and change the margin
properties for the aside.

107
00:04:03.02 --> 00:04:06.06
Let's keep zero on the
top, zero on the right.

108
00:04:06.06 --> 00:04:08.04
Let's set zero on the bottom,

109
00:04:08.04 --> 00:04:12.02
and for the left-hand
margin, let's set 8%.

110
00:04:12.02 --> 00:04:14.01
And so that 8% left
margin is going to give us

111
00:04:14.01 --> 00:04:17.03
a nice space between the
left-hand side of the aside

112
00:04:17.03 --> 00:04:21.01
and the right-hand side
of the article element.

113
00:04:21.01 --> 00:04:23.05
And now since the article
element takes more vertical space

114
00:04:23.05 --> 00:04:26.09
than the aside element, the
next elements in the page,

115
00:04:26.09 --> 00:04:29.00
which are the h2 and the paragraph element

116
00:04:29.00 --> 00:04:32.03
for the types of pastry,
are now still text wrapping

117
00:04:32.03 --> 00:04:35.00
to the right-hand side
of the article element.

118
00:04:35.00 --> 00:04:37.06
So now what we need to do
is use a clear property

119
00:04:37.06 --> 00:04:40.01
on the h2 element to make sure

120
00:04:40.01 --> 00:04:43.00
that it doesn't flow
around any other elements.

121
00:04:43.00 --> 00:04:45.09
So back in the CSS, let's scroll up.

122
00:04:45.09 --> 00:04:49.04
Let's find the h2 property up here,

123
00:04:49.04 --> 00:04:52.04
and let's come in here and add a clear.

124
00:04:52.04 --> 00:04:55.07
And we're going to come down
and set left, and a semicolon.

125
00:04:55.07 --> 00:04:57.07
Now back in the preview I can scroll down

126
00:04:57.07 --> 00:05:02.01
and now the h2 element will
clear any floating items

127
00:05:02.01 --> 00:05:04.01
to its left-hand side.

128
00:05:04.01 --> 00:05:06.08
So this gives us a way to
create columns in our layout

129
00:05:06.08 --> 00:05:10.03
and then clear those columns
based on additional content.

130
00:05:10.03 --> 00:05:11.09
And so now that we have
columns in our layout,

131
00:05:11.09 --> 00:05:14.04
one thing we'll want to
consider is removing the columns

132
00:05:14.04 --> 00:05:17.09
for small screens since
they'll be difficult to read.

133
00:05:17.09 --> 00:05:20.04
So back in our CSS file, we scroll down,

134
00:05:20.04 --> 00:05:24.00
I put in a media query here
for the maximum width of 600.

135
00:05:24.00 --> 00:05:25.07
So to clear the float properties,

136
00:05:25.07 --> 00:05:29.01
all we need to do is
simply set a float none.

137
00:05:29.01 --> 00:05:31.09
So let's come up here and
copy the article element.

138
00:05:31.09 --> 00:05:34.01
So inside of the media
query let's come down here

139
00:05:34.01 --> 00:05:37.00
and paste the article rule.

140
00:05:37.00 --> 00:05:40.07
First let's come in here
and set a width to auto.

141
00:05:40.07 --> 00:05:44.08
Then a space. Then we'll set
the float property to none.

142
00:05:44.08 --> 00:05:46.05
Let's duplicate that.

143
00:05:46.05 --> 00:05:50.01
Let's change the second one to the aside.

144
00:05:50.01 --> 00:05:53.03
We'll keep the width auto,
we'll keep the float:none

145
00:05:53.03 --> 00:05:54.09
and then a space.

146
00:05:54.09 --> 00:05:57.02
And then if we scroll down
we do have that margin left

147
00:05:57.02 --> 00:05:58.05
that we'll want to get rid of.

148
00:05:58.05 --> 00:06:02.02
So let's reset all of the
margins for the aside.

149
00:06:02.02 --> 00:06:03.07
So we'll set margin, space.

150
00:06:03.07 --> 00:06:07.08
For the top and bottom we're
going to set 35 pixels,

151
00:06:07.08 --> 00:06:11.05
and for the right and left we'll set zero.

152
00:06:11.05 --> 00:06:13.03
And so now if we scroll
down this is what the aside

153
00:06:13.03 --> 00:06:15.01
will look like on small screens,

154
00:06:15.01 --> 00:06:18.04
anything under 600 pixels wide.

155
00:06:18.04 --> 00:06:19.09
So if we resize the browser

156
00:06:19.09 --> 00:06:24.01
this will be the large-screen
view, with our columns,

157
00:06:24.01 --> 00:06:25.01
and then the small-screen view

158
00:06:25.01 --> 00:06:26.08
will clear the floats
on article and aside,

159
00:06:26.08 --> 00:06:30.03
and bring us back to a
single-column layout.

160
00:06:30.03 --> 00:06:31.03
Now if you'd like to learn more

161
00:06:31.03 --> 00:06:32.03
about using the float property

162
00:06:32.03 --> 00:06:34.03
to create even more advanced web layouts

163
00:06:34.03 --> 00:06:36.04
for both on-screen and printing,

164
00:06:36.04 --> 00:06:38.00
check out our course here in the library

165
00:06:38.00 --> 00:06:40.08
called "Creating a Responsive Web Design."

166
00:06:40.08 --> 00:06:41.09
And if you'd like to learn more

167
00:06:41.09 --> 00:06:44.06
about emerging CSS technologies
for building web layouts,

168
00:06:44.06 --> 00:06:46.09
I'd recommend taking
James Williamson's course

169
00:06:46.09 --> 00:06:50.04
that takes a first look at CSS: Flexbox.

170
00:06:50.04 --> 00:06:51.08
And so that concludes our brief look

171
00:06:51.08 --> 00:06:53.06
at the CSS Float property.

172
00:06:53.06 --> 00:06:56.06
And, as always, thanks for watching.