#100DaysOfWeb in Python Transcripts
Chapter: Days 13-16: CSS Layout and Design
Lecture: Demo: Floating elements
0:00 The final thing I want
0:01 to look at here are floating elements.
0:04 So let's go over and look at this page.
0:06 Now right now no items are floating
0:09 but what I'd like is
0:10 I would like this thing to be over here on the right
0:14 and this message and any other content
0:16 in there to flow around it.
0:19 How do we do that? Use a table? No.
0:22 The answer's almost never use a table.
0:24 So what we're going to do is
0:26 we're going to change the style of this dune cat image here
0:30 and we're going to float it to the right
0:31 and then the message is going to go around it.
0:33 So let's go here and look at the HTML.
0:38 This is the part that we're interested in.
0:39 So we have this top <div> id
0:41 and we have the dune cat image
0:43 and we have the message.
0:45 So, we want this
0:47 to be to the right of that.
0:50 What's kind of unexpected, maybe, is
0:52 elements that are floating have to precede
0:55 the thing that is supposed to flow around them
0:57 so you put the image, and say go to the right
0:59 and then stuff beyond it flows around it.
1:02 All right.
1:03 Let's go over here to our CSS file again.
1:05 You can see at the top we're including float CSS
1:08 as you might expect.
1:09 And here we're doing a little style
1:11 remember like this kind of black background color
1:14 and white text and so on.
1:16 And it's all being done right here.
1:18 So I want to have that image float around there.
1:21 Turns out it's pretty easy.
1:22 I don't want to target all images.
1:24 Just the images contained within the top div.
1:27 So I'll do this hierarchy thing here.
1:30 And what I want to do I want to type
1:31 say the float is right.
1:35 All right now with this float set
1:37 boom that's it. Well sort of right?
1:41 There's a couple of things going on weird here.
1:44 First of all I actually want the picture smaller.
1:47 But before I make it smaller
1:49 did I really mean for it to bust out of this top div
1:51 and then like have that float around it
1:53 and like that little part float around it?
1:55 No I want it to be stuck in the top div
1:58 but to the right.
2:00 Once you start something floating
2:02 it kind of floats forever.
2:04 And so everything around it even hierarchically
2:08 coming out
2:09 will start to float around it.
2:10 So what we have to do is
2:11 if you want to control that
2:12 at some point say no more floats.
2:15 We're done floating.
2:16 There's a new reset that.
2:18 So we can come over here and have a div.
2:19 And we can say the style
2:21 we just hard code it.
2:23 Sometimes we have classes for this and set the CSS style
2:26 but for this one I just hard code.
2:28 So what you got to say is clear both.
2:30 So clear left. Clear right and so on.
2:32 So just no more floats. Clear.
2:35 Now if I run that you can see
2:36 at least it stays within its little box.
2:39 That's pretty good.
2:40 What else could we do.
2:41 Let's set the size so this looks a little bit better.
2:44 Let's go to our image and say
2:45 lets' go for height
2:46 and set that to something like 96 pixels.
2:51 Here we go. That looks quite good. Now this.
2:54 If you notice this message is a little bit off right.
2:56 I feel like it's a little more black at the bottom
2:58 than at the top. So let's go over here
3:03 and find out what is.
3:06 That is this div right there.
3:08 And let's give it a class message or something like that.
3:12 Now we can say hash top div not message.
3:16 Let's set the margin top to be 10px
3:20 push it in a little. Pretty close.
3:23 Not quite. Maybe 12. And then margin left.
3:28 I'll set that at 10px as well. There we go.
3:32 I mean we're not doing incredible web design here
3:35 but it definitely looks better than when we started.
3:38 So we got this positioned nice in the middle.
3:40 We got our image on the right side
3:41 and we got it flowing to the right.
3:43 Except not entirely
3:45 not jumping and taking over the whole page.
3:47 So that's how we use float to stick that thing to the right
3:50 and I guess it's worth showing you that if I move it around
3:53 it's still going to do the right thing.
3:56 Let's unlimited
3:58 Size limit at some point in Firefox
3:59 but there you have it.
4:01 Looks pretty good I think.