Python for Entrepreneurs Transcripts
Chapter: Web design foundations
Lecture: CSS: Floating demo
Login or
purchase this course
to watch this video and the rest of the course contents.
0:02
Let's return to our design web app. Here we have a very basic set of HTML, we have a top div and within we have two things, we have - this is a message
0:11
and we have some dunecat picture, whatever that looks like. And then we have a paragraph,
0:17
the idea is that this is kind of be a navigational bit at the top, and here this is going to be the content of the page.
0:23
OK, so let's just see what it looks like, here we go, I applied a few styles to make the fonts bigger, to shrink the dunecat,
0:31
here you can see "I are dunecat, I controls the spice, I controls the universe." Beautiful,
0:36
so if you have read the book Dune, this is a great little worm cat there. And notice, we have this message, we have this cat,
0:44
what I would like to see is I'd like to see this message here and this part sort of scaled a stretch and this cat the stick in the upper right.
0:51
So, how do we do that? Let's go over here and the way that you do this, the way you say "I want the thing to stick to a side", is
0:59
you say there is a couple of options, to create layout among them. but here let's say we would like this thing this image,
1:06
now because there is only one image on the whole page I can just use just the image type, but we probably want to be specific,
1:12
I come over here and we say "float", and now "float..." you have a couple of options,
1:17
you have "none", which is standard, you have "left" and you have "right". So we'll pick right, that sounds good,
1:23
now this is not kind of do quite what we expected, there is a couple of problems here, one is the order of these things
1:29
and the other is this container, the black thing, if we look at the black thing before I run this is this,
1:35
and it contains the div and it contains the image. But when I run this, now all of the sudden the dunecat is shooting out the bottom
1:42
and the main content is wrapping around it, OK that's bizzare, why is it not like at least lined up with this vertically,
1:49
we wanted to go to the right of that thing. Well, in HTML, the way it works, the thing you would like to float- let me rephrase,
1:59
the thing you want to wrap around it goes after the thing that is floating.
2:03
So in order to get that to work right, we've got to say the things that floats first and then the various pieces that go around it,
2:09
so let's look at this again, there you go, that's better, at least they are kind of visually lined up on the top there.
2:15
But, what is the deal with this wrapping around it, well, that's because it's float, but why does it not stay in this box here?
2:22
The reason is, we need to tell the content of this, we need to tell basically the browser that this stuff is all suppose to wrap around it
2:31
but everything after that, is not, it's suppose to go back to normal layout, so there is a "anti-float", if you will, that we can set here,
2:39
and we can put more or less any HTML item here but a div is like zero height if it has no content, so this is decent,
2:46
and the way you stop this floating is you say: "OK, here is the end of the stuff that wraps, now make a new line" as you say "clear: both".
2:56
We could technically just say "clear: left" but let's just say clear both, that'll cover both cases;
3:01
so if I go over here and I refresh, now it should go back to exactly what you would probably have thought we got in the first place.
3:08
Perfect, now of course, we've got some height to sort of line this up, and vertically align them but that's a whole different conversation.
3:15
So we were able to use the "float", let me just move this around a little, to show you the cat sticks to the side, right,
3:21
the cat totally sticks in the upper right, and we can get this sort of navigational thing at the top and the main content to go below it.
3:28
And we did that by setting the image to float right, making sure that the thing that is floating right precedes the stuff
3:36
that is supposed to float around it or wrap around it and then when we are done,
3:41
we have all the stuff that is supposed to wrap around, we say: "Stop this float business, go back to normal layout" by saying "clear: both".
3:48
So we have "float" and we have "anti-float", which is "clear".