Python for Entrepreneurs Transcripts
Chapter: Web design foundations
Lecture: CSS: Floating demo
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".