#100DaysOfWeb in Python Transcripts
Chapter: Days 13-16: CSS Layout and Design
Lecture: Concept: Floating elements
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
A quick review of floating elements. Here we're saying, all images on our HTML page, they float to the right. Now, that's a little broad, obviously,
0:08
but in this tiny HTML fragment, it makes sense. There's a couple rules to keep in mind. One, that thing that is going to float to the right
0:17
has to precede the stuff that floats around it, that is on its left. So, we want the message to be on the left, and the image to be on the right.
0:24
The image has to come first. If it was the other order, there'd be one line with the message, and then another line with the image.
0:32
Also, we saw that this floating is perpetual; it goes to the rest of the page unless you say, until here.
0:39
So, when you want to say, no more items float here, then you add this clear equals both for the style,
0:45
and that says, Dune Cat, you're not floatin' around anything else after this, and it keeps it contained within the top div as well.
0:51
For some reason it's bigger, it will actually change the size of the top div, as opposed to shooting out of it as we saw before.