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