#100DaysOfWeb in Python Transcripts
Chapter: Days 13-16: CSS Layout and Design
Lecture: Concept: Floating elements
0:00 A quick review of floating elements.
0:01 Here we're saying, all images on our HTML page,
0:04 they float to the right.
0:05 Now, that's a little broad, obviously,
0:07 but in this tiny HTML fragment, it makes sense.
0:11 There's a couple rules to keep in mind.
0:12 One, that thing that is going to float to the right
0:16 has to precede the stuff that floats around it,
0:18 that is on its left.
0:20 So, we want the message to be on the left,
0:22 and the image to be on the right.
0:23 The image has to come first.
0:25 If it was the other order,
0:26 there'd be one line with the message,
0:28 and then another line with the image.
0:31 Also, we saw that this floating is perpetual;
0:34 it goes to the rest of the page unless you say, until here.
0:38 So, when you want to say, no more items float here,
0:40 then you add this clear equals both for the style,
0:44 and that says, Dune Cat, you're not floatin' around
0:47 anything else after this, and it keeps it contained
0:49 within the top div as well.
0:50 For some reason it's bigger,
0:52 it will actually change the size of the top div,
0:55 as opposed to shooting out of it as we saw before.