All language subtitles for 18. CSS Float and Clear

Now we're getting really really close to the end result now.
1

And all we need to do is start getting our Skills section laid out in a way that looks a little bit
2

better than this.
3

So the first thing to notice is that, if I switch on Pesticide, you can see that we've got the Skills
4

section, and inside the Skills section,
5

there’s two divs. And if you look in the code then you'll see exactly the same structure here.
6

So this div is the Skills div, which contains two further divs, which are the Skill rows. And if you prefer
7

to visualize this a little bit easier by seeing which is the opening tag for the div and which one is
8

the closing one,
9

you can actually head into Atom and change your preferences in your Editor section to show the indent guides.
10

So now you can see that you've got these lines that show you which div matches with which closing element.
11

Now I actually prefer this off just because I find it too cluttery.
12

But it all depends on how you wish to visualize it.
13

But the important thing is that we've got these two divs that represent two skill-rows and I want you
14

to make each skill-row have only 50 percent of the width of the screen.
15

So at the moment it's 100 percent because it's a block element.
16

But I want you to change that to make it only 50 percent.
17

So pause the video and complete the challenge.
18

All right so this shouldn't be too hard. If we head into our styles.css, and we go ahead and add our
19

skill-row, and just make sure that you check to see if you've got any typos between the way it's named
20

here in the class attribute and the way that you've targeted it over here.
21

So we wanted to change the width to 50 percent, and we can hit save and refresh, and you can see that
22

even though our width for the div is down 50 percent because it's no longer 100 percent,
23

it’s no longer centered in the middle of our web site.
24

So how can we fix this?
25

We've seen this before, and as a challenge I want you to restore this skill-row to the center of the
26

web page.
27

So pause the video and see if you can figure out how to do that.
28

So as we've seen before, the way that we achieve this is by setting the margin to be auto on the left
29

and on the right.
30

So let's go ahead and do that.
31

So we can set the margin for this skill-row to be auto.
32

And that just means auto on all four sides, which will center it if we refresh our web page.
33

Now at the moment that div is a little bit too close to the top heading and to the next div.
34

So how can you change the margin property so that we end up with a 100 pixel margin at the top and 100
35

pixel margin at the bottom,
36

but keeping this margin auto on the left and right?
37

Pause the video and see if you can complete this challenge.
38

All right.
39

So this goes back to the circle shorthand.
40

So if we start from the top as we always do we're going to add a 100 pixel margin at the top.
41

Next we come clockwise to the right which we want to keep as auto.
42

Next we go down to the bottom which we said again we want 100 pixels margin.
43

And finally we have the left which we are going to set as auto.
44

So the left and the right are auto, our top and the bottom are 100 pixels.
45

Let's hit save and let's refresh and we can see that margin now in action.
46

Now the next thing I want you to do is, I want this text, both the part for the Design & Development
47

as well as the description text, to be left aligned.
48

So can you figure out which property you need to change and where in order to make that happen.
49

So pause the video and complete the challenge.
50

Right. So all we need to do is to go into the skill-row and change the text-align property.
51

Remember we changed this previously to make the text center aligned for most of the body.
52

And that in itself aligned the images to be centered as well as all of our text.
53

But in this skill-row here, we want the text to be left aligned, so we can change that value to left
54

and that will override the center text-align in the body.
55

So now if we hit refresh, you can see the text inside the Skills section is now left aligned,
56

but outside of it it’s still center aligned.
57

Now the next thing I want to do is to make the paragraphs of the text in here a little bit more spaced
58

apart by changing the line height.
59

So can you double the line height by changing the line height property? So
60

pause the video and complete the challenge.
61

All right. So in this case we're again going to be inside the skill-row and we're changing the line-height
62

property to 2.
63

And remember in this case we don't actually have any units and we're simply specifying a scale.
64

Let's hit refresh.
65

And you can see that our text is now a lot more spaced out and much easier to read.
66

Now the last thing I want to do before we look into the positioning of our skill-row is we need this image
67

to be a lot smaller.
68

So go ahead and change the width of the image to 25 percent.
69

All right.
70

So in order to target the image we need to specify their class names.
71

So one is called code-img and one is called chilli-img.
72

Now this is just the classes that I've added for my own images.
73

You might have named these classes differently because you might have different images.
74

Just check what you have as your class name before you start implementing this and make sure that it
75

works.
76

So I'm going to cluster that with the other images, and the first one is called code-img, and I want
77

to change the width to 25 percent of its parent, and the next one is the chilli-img,
78

and this again is going to have a width of 25 percent.
79

Let's hit save and let's refresh and you can see that they are now the same size even though they weren't
80

before because they're now scaled down based on the width of their parent which in this case is actually
81

the skill-row.
82

So it's now a quarter the width of the skill-row, which itself is only 50 percent the width of the
83

entire page.
84

So now comes the really interesting thing.
85

How can I make my text wrap around my image?
86

So I want this skill-row to be a lot stouter,
87

so less in height, and I want this image to be on the left but I want my text to be on the right of the
88

image and wrapping around the image as necessary.
89

Well, this is where the topic of this lesson comes in and that is of course floating. So we can make
90

the image float to the left of the text and make the text wrap around it by simply changing one property.
91

And that is the float property.
92

So if we go into our code-img and we change the float property to float left and we hit save, once
93

we refresh you'll see that our image is now on the left of our skill-row,
94

and our text is now wrapping around the image in order to display both of these on the same line.
95

Now it looks a little bit odd having the text right up next to the image.
96

So can you figure out a way of having 30 pixels of space between this text and this image?
97

So pause the video and see if you can complete the challenge.
98

Now there's a couple of ways you can do this, you can think about padding or margin.
99

In this case in order to apply a margin to the text it would be kind of difficult because they're completely
100

separate at the moment.
101

We've got an h3 and we've got a paragraph.
102

Now you could add a div to wrap them together and add a left margin to that div.
103

But what's much easier is to simply add a margin-right to our image.
104

So let's head into our code and change the code-img margin-right property to 30 pixels.
105

And once we refresh you'll see that our image now has a bit of space between it and the text and the
106

text, because it's wrapping around and now it has less width to be displayed,
107

it’s actually taking up the full width of that div.
108

And this looks a lot better than previously.
109

Now as a challenge I want you to use the same principles of floating to make this image appear on the
110

right over here,
111

and for the text to wrap around that image and to have the same amounts of 30 pixels of space between
112

the image and the text.
113

So pause the video now and see if you can complete this challenge.
114

All right.
115

So pretty much the same principles here.
116

But in this case we're not floating left anymore because we want it to be on the right of the text.
117

So in that case we have to change the float property to right instead of left.
118

And that will mean that the text will wrap around the image on the left and then we just have to add
119

in that margin-left of 30 pixels on the image in order to get it to have the same amount of space as
120

we had up here.
121

So this is looking pretty sweet and we're getting very very close to our end result that we're looking
122

for.
123

Now sometimes when you float an element you might not want all of the text to be wrapped around it.
124

So for example say if we only wanted that title to wrap around this image and to be on the right of
125

the image then we can actually use another property to make sure that this text does not wrap and end
126

up at the bottom
127

over here, below the image, and that property is called clear.
128

So if I target the paragraph here. Let’s give it a class. Let’s call it, maybe, code-skill-description, and
129

I'm just going to copy and paste it down here.
130

And if I use the clear property to clear its left side then that prevents it from wrapping anything
131

on the left.
132

So let's go ahead and try that clear left.
133

Hit save, refresh.
134

You can see that that paragraph is now pushed to below the image which is floating but that heading,
135

that h3, is still wrapping around the image that's floated to the left.
136

If you think about clear as almost like the anti float then that starts to make a little bit more sense.
137

So we're saying that float this image to the left and all text will wrap around it on the right.
138

But for this paragraph we said to clear it's left which means make sure that that left margin is clear
139

and not wrapped around anything, then that basically prevents it from carrying out the default behavior.
140

Now as a challenge, can you make this paragraph appear below this image rather than wrapped around it?
141

Pause the video and see if you can complete this challenge.
142

All right. So, it's exactly the same concept here.
143

Now let's go ahead and just give that paragraph a class.
144

Let's call this chilli-skill-description.
145

And again I'm going to copy it,
146

save the file and paste it down here.
147

And of course remember that dot in front because it's a class.
148

And in this case I still need to use clear,
149

but I have to clear it’s right side in order to make sure it doesn't wrap around the image, because you
150

can see that if I tried the same thing and I cleared its left side nothing changes because it's not
151

wrapping anything on its left.
152

But if I change this to right then you'll see that it now appears below the image and it's prevented
153

from wrapping the image that's floated to the right.
154

Now I'm actually going to go ahead and clear both of these CSS rules because I actually prefer
155

the look that we had previously and I'm going to get rid of these classes as well.
156

And this is the final result that we want to keep.
157

Now as they say with great power comes great responsibility.
158

Float is one of the most commonly used and abused CSS properties.
159

The thing to remember is that it has a whole bunch of corner cases.
160

And I recommend to only use float when really really necessary and only use it for what it's meant, which
161

is wrapping text around a certain element, and don't use it for positioning.
162

Instead use what we learned about positioning like relative or absolute positioning or using the margin
163

and the padding for the layout and the positioning of your web site and to leave the float property only
164

for the cases of wrapping text.
165

Then you will surely get into less trouble and less problems than if you try to use a float
166

just as a sort of free for all layout property, which you see a lot of people mistakenly do.
167

So we are really really close to the end of this module and in the next section I've got a challenge
168

for you to look at a specification of how we want the web site to be finally laid out, and instead of
169

me guiding you step by step through all the little properties that you need to change,
170

I want you to figure out what you need to change in order to achieve the layout that I've specified.
171

So in the next lesson you'll see text instructions for you to complete the final big challenge and get
172

this web site looking beautiful.
173

So for all of that I will see you on the next lesson.