Python for Entrepreneurs Transcripts
Chapter: Web design foundations
Lecture: CSS: Floating Concepts
Login or
purchase this course
to watch this video and the rest of the course contents.
0:03
Let's review the main ides behind this floating concept, so here is the goal, we want this image to float right,
0:09
stick to the top, and stay within this little black box that we put it in, and message and other stuff to float left, and then, after that,
0:17
we want to go back to normal layout, put the main content below. All right, so how does this work with "float"?
0:22
Here is our CSS file, we can just tell it "hey image, float to the right", and like I said before, you are going to probably need to be more specific
0:29
like image #cat if the cat had cat id or something like this, right, you don't want to float all the images,
0:38
you want to float a specific one but we are going to go to the image and we say "float right", and then we are going to make sure
0:45
that the image precedes all the stuff that it's suppose to float or wrap around it, in this case it's kind of bizarre, because it wraps to the left,
0:51
but the stuff that goes around it or is supposed to sort of be next to it, in this floating, idea has to go after the thing, so we put the image first,
1:00
we tell the float and we put all the content we want there, it's in a real app there is probably more than just "this is the message",
1:06
and then, when we are done, remember the cat was sticking out of this top div, and we need to tell it like: "Hey, stop wrapping around all that stuff,
1:13
we are done with this idea of wrapping, go back to normal." And the way you do that is you say "clear: both" for the style
1:20
and you can put it on anything, it could be hyperlink, it could be whatever, but here is more or less invisible element, which is a zero height div
1:28
and that's just as good as any. So when we want to stop wrapping, we say "clear: both", "left" or "right" are the other options.