Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,640 --> 00:00:05,040
(Jonas) Now that we have a basic knowledge of how floats
2
00:00:05,040 --> 00:00:07,310
and clearing floats works,
3
00:00:07,310 --> 00:00:10,823
let's build a simple layout for our page.
4
00:00:12,530 --> 00:00:15,450
And so what we're looking for is this.
5
00:00:15,450 --> 00:00:18,080
So again, here we have, or,
6
00:00:18,080 --> 00:00:22,020
a site finally as a sidebar here on the right side
7
00:00:22,020 --> 00:00:25,340
and our main content on the left side.
8
00:00:25,340 --> 00:00:27,820
Then we still have the header on the top
9
00:00:27,820 --> 00:00:30,440
spending from one side to the other
10
00:00:30,440 --> 00:00:32,783
and the same down here for the footer.
11
00:00:34,090 --> 00:00:35,050
All right.
12
00:00:35,050 --> 00:00:38,773
And you also noticed that the container is now a lot larger.
13
00:00:39,610 --> 00:00:41,530
So we will do all of that,
14
00:00:41,530 --> 00:00:45,670
but let's identify the main parts of our layout.
15
00:00:45,670 --> 00:00:47,410
So that's the header here,
16
00:00:47,410 --> 00:00:51,363
which we already have nicely in place here.
17
00:00:52,410 --> 00:00:53,937
Then it is this article,
18
00:00:53,937 --> 00:00:57,543
just a site and the footer down here.
19
00:00:58,650 --> 00:00:59,850
Right?
20
00:00:59,850 --> 00:01:02,590
So let's start by selecting those elements
21
00:01:02,590 --> 00:01:04,053
here in our code again.
22
00:01:05,320 --> 00:01:08,420
And so I will select them here again
23
00:01:08,420 --> 00:01:11,160
for the same reasons as I explained before,
24
00:01:11,160 --> 00:01:12,960
which is because later on,
25
00:01:12,960 --> 00:01:16,760
I will want to delete this code or to deactivate it.
26
00:01:16,760 --> 00:01:19,211
And then it wouldn't be good to have these properties
27
00:01:19,211 --> 00:01:22,133
in the selectors that we already have up there.
28
00:01:23,610 --> 00:01:24,970
So,
29
00:01:24,970 --> 00:01:26,453
selecting the article,
30
00:01:27,410 --> 00:01:28,463
the aside,
31
00:01:31,900 --> 00:01:33,390
and the footer.
32
00:01:33,390 --> 00:01:35,240
And the header is not really necessary
33
00:01:35,240 --> 00:01:38,563
because we already have a lot of work done on it.
34
00:01:39,440 --> 00:01:40,273
Okay.
35
00:01:42,950 --> 00:01:46,920
Now here let's quickly get rid of this comment.
36
00:01:46,920 --> 00:01:50,450
And now the first thing I'm actually going to do is to work
37
00:01:50,450 --> 00:01:52,930
on the container and in particular,
38
00:01:52,930 --> 00:01:56,440
to make it 1200 pixels wide.
39
00:01:56,440 --> 00:01:59,170
And this will be the same for all the layouts.
40
00:01:59,170 --> 00:02:04,170
So no matter if billing it with float, Flex box or CSS grid.
41
00:02:04,290 --> 00:02:06,083
And so I'm doing that up here.
42
00:02:08,300 --> 00:02:09,480
All right.
43
00:02:09,480 --> 00:02:13,263
And we can also remove this color here again.
44
00:02:15,420 --> 00:02:17,233
That's, that's a lot better.
45
00:02:18,167 --> 00:02:20,410
And so now let's get to work
46
00:02:20,410 --> 00:02:23,790
and basically putting this article here on the left side
47
00:02:23,790 --> 00:02:26,283
and the aside on the right side.
48
00:02:30,010 --> 00:02:33,160
And to visualize this a little bit better,
49
00:02:33,160 --> 00:02:35,200
whenever I do something like this,
50
00:02:35,200 --> 00:02:40,200
I always give these elements some background color
51
00:02:40,260 --> 00:02:43,463
to make it easier to see the boxes on our page.
52
00:02:45,810 --> 00:02:47,993
So background color like this.
53
00:02:50,300 --> 00:02:52,320
And do you see, I'm starting more and more
54
00:02:52,320 --> 00:02:55,050
to use DVS code auto complete function,
55
00:02:55,050 --> 00:02:59,050
because at some point we know these properties by heart,
56
00:02:59,050 --> 00:03:01,320
and then there is not really a need
57
00:03:01,320 --> 00:03:03,163
to keep writing them by hand.
58
00:03:04,980 --> 00:03:07,033
So the colors here don't really matter.
59
00:03:08,760 --> 00:03:11,883
Just so we can actually see what is happening.
60
00:03:13,090 --> 00:03:15,460
And so now let's get to work.
61
00:03:15,460 --> 00:03:18,070
So we already know how float works,
62
00:03:18,070 --> 00:03:20,510
so this shouldn't be too hard.
63
00:03:20,510 --> 00:03:22,660
However, before using floats,
64
00:03:22,660 --> 00:03:25,527
we actually need to change the width of these two elements
65
00:03:25,527 --> 00:03:28,610
that we want to be side by side.
66
00:03:28,610 --> 00:03:30,610
So article and the site.
67
00:03:30,610 --> 00:03:34,160
So right now, each of them, since they are block elements,
68
00:03:34,160 --> 00:03:39,160
occupy 100% of the available width of the container, right?
69
00:03:40,010 --> 00:03:43,270
And so again, if we want them to be side by side,
70
00:03:43,270 --> 00:03:46,150
each of them needs to have a certain width.
71
00:03:46,150 --> 00:03:49,680
So our container is 1200 pixels wide.
72
00:03:49,680 --> 00:03:54,033
And so, let's divide that up for the article and the aside.
73
00:03:54,890 --> 00:03:56,790
So I'm going to give the article
74
00:03:56,790 --> 00:04:00,760
a width of 900 of those pixels,
75
00:04:00,760 --> 00:04:04,860
and the remaining 300, go to the sidebar.
76
00:04:04,860 --> 00:04:06,103
So to this aside.
77
00:04:07,220 --> 00:04:12,220
And so 900 plus 300 are exactly the 1200 of the container.
78
00:04:14,240 --> 00:04:15,073
Right?
79
00:04:16,620 --> 00:04:18,880
So that looks like this.
80
00:04:18,880 --> 00:04:22,633
And now all there's left to do is to put them side by side.
81
00:04:24,020 --> 00:04:27,610
So float, left,
82
00:04:27,610 --> 00:04:31,333
and then here float right.
83
00:04:33,250 --> 00:04:35,283
And actually here we could use both.
84
00:04:36,550 --> 00:04:37,610
Okay.
85
00:04:37,610 --> 00:04:39,080
And here you go.
86
00:04:39,080 --> 00:04:43,150
Now they are nicely side-by-side but now notice
87
00:04:43,150 --> 00:04:46,240
what happened here with the footer.
88
00:04:46,240 --> 00:04:48,590
So the footer is now floating around
89
00:04:48,590 --> 00:04:50,540
these two elements as well,
90
00:04:50,540 --> 00:04:54,840
because, well, that is exactly what the float property does.
91
00:04:54,840 --> 00:04:58,070
It makes it so that the elements that come after it,
92
00:04:58,070 --> 00:05:01,730
will float around that first element.
93
00:05:01,730 --> 00:05:06,420
So here we have a first, this article, then the aside,
94
00:05:06,420 --> 00:05:08,670
and afterwards comes the footer.
95
00:05:08,670 --> 00:05:11,410
And so if we set the aside to float,
96
00:05:11,410 --> 00:05:15,540
then the element that comes after it will float around it.
97
00:05:15,540 --> 00:05:16,373
Okay.
98
00:05:16,373 --> 00:05:18,250
So that's just how floats work,
99
00:05:18,250 --> 00:05:21,070
which are again, quite confusing.
100
00:05:21,070 --> 00:05:23,710
And that is exactly the reason why later on,
101
00:05:23,710 --> 00:05:28,710
we will replace floats with CSS grid and Flex box.
102
00:05:29,030 --> 00:05:32,030
But anyway, if we want this footer here
103
00:05:32,030 --> 00:05:36,410
to be back down where we want it to be down here,
104
00:05:36,410 --> 00:05:38,840
then we need to clear the float.
105
00:05:38,840 --> 00:05:40,040
Okay.
106
00:05:40,040 --> 00:05:41,810
However, in this situation,
107
00:05:41,810 --> 00:05:45,340
actually, we don't need to create any new empty diff
108
00:05:45,340 --> 00:05:48,230
or we don't need to use the clear fixed class
109
00:05:48,230 --> 00:05:50,680
because we already have that element
110
00:05:50,680 --> 00:05:52,960
on which we want to clear the float.
111
00:05:52,960 --> 00:05:53,840
Right.
112
00:05:53,840 --> 00:05:55,713
Which is exactly the footer.
113
00:05:57,030 --> 00:05:58,100
Okay.
114
00:05:58,100 --> 00:06:01,780
So again, we needed to create an empty diff before,
115
00:06:01,780 --> 00:06:03,980
or to use the clear fixed class,
116
00:06:03,980 --> 00:06:06,230
because there was simply no other element
117
00:06:06,230 --> 00:06:10,160
on which we could clear the floats, but now there is.
118
00:06:10,160 --> 00:06:12,270
So it is this next element,
119
00:06:12,270 --> 00:06:15,483
which we do not want to float around the other ones.
120
00:06:17,450 --> 00:06:18,460
Okay.
121
00:06:18,460 --> 00:06:22,490
So let's simply say clear both.
122
00:06:22,490 --> 00:06:26,060
So usually don't bother with clear left, or right.
123
00:06:26,060 --> 00:06:27,010
If you say both,
124
00:06:27,010 --> 00:06:29,210
then it's just going to work no matter what.
125
00:06:30,210 --> 00:06:34,880
And so now you see it's gone and it is back down here
126
00:06:34,880 --> 00:06:37,030
where it actually belongs.
127
00:06:37,030 --> 00:06:37,863
Okay.
128
00:06:38,990 --> 00:06:42,450
Now just quickly about what I said that in this situation,
129
00:06:42,450 --> 00:06:46,170
it doesn't really matter if we used float right or left
130
00:06:46,170 --> 00:06:47,457
on the aside.
131
00:06:47,457 --> 00:06:48,500
And the reason for that
132
00:06:48,500 --> 00:06:52,110
is that there is no empty space between them anyway.
133
00:06:52,110 --> 00:06:54,610
So in this case, it doesn't matter.
134
00:06:54,610 --> 00:06:57,680
But actually let's create some space between them.
135
00:06:57,680 --> 00:06:58,780
And in this case,
136
00:06:58,780 --> 00:07:03,290
using margin or padding is probably not the best approach.
137
00:07:03,290 --> 00:07:04,800
So instead, what I will do
138
00:07:04,800 --> 00:07:09,440
is to simply decrease the size of this article element here,
139
00:07:09,440 --> 00:07:12,320
and so that will then essentially create a gap
140
00:07:12,320 --> 00:07:14,753
between the both of these elements.
141
00:07:16,000 --> 00:07:19,380
So let's decrease this by 75 pixels.
142
00:07:19,380 --> 00:07:21,563
So it will then end up with just 825.
143
00:07:23,420 --> 00:07:26,930
And so now there appears this gap
144
00:07:26,930 --> 00:07:29,610
because this element is floated to the left
145
00:07:29,610 --> 00:07:31,370
and this to the right.
146
00:07:31,370 --> 00:07:34,370
And so then of course, if we have some remaining space,
147
00:07:34,370 --> 00:07:38,140
it will simply stay here in the middle of the two.
148
00:07:38,140 --> 00:07:41,200
Now, if we set this one to left now with this situation,
149
00:07:41,200 --> 00:07:43,210
that would not be ideal
150
00:07:43,210 --> 00:07:46,270
because now the empty space would then be here
151
00:07:46,270 --> 00:07:47,433
on the right side.
152
00:07:49,060 --> 00:07:50,560
So let's put it back
153
00:07:50,560 --> 00:07:55,470
and we can also get rid of the background colors.
154
00:07:55,470 --> 00:07:59,253
And with that, we actually finished the layout already.
155
00:08:01,170 --> 00:08:04,312
So this is already exactly what it looks like
156
00:08:04,312 --> 00:08:06,663
in the demo version.
157
00:08:07,620 --> 00:08:09,140
Right?
158
00:08:09,140 --> 00:08:09,973
Great!
159
00:08:09,973 --> 00:08:13,660
So this is how we build a very simple float layout
160
00:08:13,660 --> 00:08:16,520
using floats, as I was just saying.
161
00:08:16,520 --> 00:08:17,353
Now, again,
162
00:08:17,353 --> 00:08:20,700
these are a bit hard to understand and to work with,
163
00:08:20,700 --> 00:08:23,470
and that's why the people who work on CSS
164
00:08:23,470 --> 00:08:25,700
came up with these modern solutions,
165
00:08:25,700 --> 00:08:29,180
such as Flex box and CSS grid.
166
00:08:29,180 --> 00:08:31,700
And we will talk about them very soon,
167
00:08:31,700 --> 00:08:34,830
but for now we need to quickly learn about something else,
168
00:08:34,830 --> 00:08:37,620
which is to finally change the box model
169
00:08:37,620 --> 00:08:39,330
from the default behavior
170
00:08:39,330 --> 00:08:41,670
to something that makes more sense.
171
00:08:41,670 --> 00:08:43,673
So let's do that in the next video.
12199
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.