[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.14,0:00:04.50,Default,,0000,0000,0000,,I'm laying out a webpage for hopper,\None of our avatars here on Khan Academy.
Dialogue: 0,0:00:04.72,0:00:09.52,Default,,0000,0000,0000,,It's got an image, some cool links,\Nand a paragraph.
Dialogue: 0,0:00:10.36,0:00:15.52,Default,,0000,0000,0000,,I think that this picture of Hopper\Nwould look better next to the paragraph,
Dialogue: 0,0:00:15.52,0:00:17.77,Default,,0000,0000,0000,,so I'm going to cut
Dialogue: 0,0:00:17.77,0:00:19.99,Default,,0000,0000,0000,,and paste it down here.
Dialogue: 0,0:00:20.30,0:00:23.56,Default,,0000,0000,0000,,Hm. Okay, that doesn't look\Nas good as I hoped it would.
Dialogue: 0,0:00:23.80,0:00:25.87,Default,,0000,0000,0000,,The text starts\Nat the bottom of the image.
Dialogue: 0,0:00:26.04,0:00:28.81,Default,,0000,0000,0000,,I was hoping that the text\Nwould wrap around the image,
Dialogue: 0,0:00:28.81,0:00:30.65,Default,,0000,0000,0000,,like in newspapers and magazines.
Dialogue: 0,0:00:31.11,0:00:33.96,Default,,0000,0000,0000,,We'll need a new\NCSS property for that: `float`.
Dialogue: 0,0:00:34.07,0:00:37.25,Default,,0000,0000,0000,,It's a way of floating elements\Nin and around other elements,
Dialogue: 0,0:00:37.25,0:00:39.82,Default,,0000,0000,0000,,and it's perfect\Nfor wrapping text around images.
Dialogue: 0,0:00:39.99,0:00:43.96,Default,,0000,0000,0000,,So we go up to our "pic" rule, and say:\N`float: `.
Dialogue: 0,0:00:44.30,0:00:48.08,Default,,0000,0000,0000,,And then for the value, we need to decide\Nif we want the picture to float
Dialogue: 0,0:00:48.08,0:00:50.42,Default,,0000,0000,0000,,to the left-hand side\Nor the right-hand side.
Dialogue: 0,0:00:50.77,0:00:52.01,Default,,0000,0000,0000,,Let's try left.
Dialogue: 0,0:00:52.74,0:00:54.47,Default,,0000,0000,0000,,Great. Perfect.
Dialogue: 0,0:00:54.59,0:00:57.35,Default,,0000,0000,0000,,Well, okay, not quite perfect,
Dialogue: 0,0:00:57.35,0:01:00.21,Default,,0000,0000,0000,,because the text\Nis really close to the image.
Dialogue: 0,0:01:00.32,0:01:02.43,Default,,0000,0000,0000,,Do you remember\Nwhat property we should use
Dialogue: 0,0:01:02.43,0:01:04.44,Default,,0000,0000,0000,,to separate the text from the image?
Dialogue: 0,0:01:04.76,0:01:07.22,Default,,0000,0000,0000,,It's part of the box model,\Nwhich we just learned.
Dialogue: 0,0:01:07.42,0:01:08.61,Default,,0000,0000,0000,,Margin.
Dialogue: 0,0:01:08.90,0:01:13.66,Default,,0000,0000,0000,,Let's add some `margin: right`\Nand `margin: bottom` to this image
Dialogue: 0,0:01:13.66,0:01:15.50,Default,,0000,0000,0000,,to give it a little breathing room.
Dialogue: 0,0:01:16.08,0:01:21.98,Default,,0000,0000,0000,,Ah, okay, that's much better.
Dialogue: 0,0:01:22.27,0:01:26.07,Default,,0000,0000,0000,,We can also float elements\Nthat aren't images.
Dialogue: 0,0:01:26.61,0:01:28.59,Default,,0000,0000,0000,,Like if we want something like a sidebar.
Dialogue: 0,0:01:29.08,0:01:31.33,Default,,0000,0000,0000,,Let's-- what about this list of links?
Dialogue: 0,0:01:31.75,0:01:34.85,Default,,0000,0000,0000,,We can take this list of links\Nand float it to the right.
Dialogue: 0,0:01:35.12,0:01:38.10,Default,,0000,0000,0000,,So let's add a rule for `#hopper-links`,
Dialogue: 0,0:01:38.10,0:01:40.75,Default,,0000,0000,0000,,and float it to the right.
Dialogue: 0,0:01:41.29,0:01:44.37,Default,,0000,0000,0000,,Okay, it's floating\Nbut it's taking up a lot of width--
Dialogue: 0,0:01:44.37,0:01:46.44,Default,,0000,0000,0000,,more than I was hoping it'd take up.
Dialogue: 0,0:01:46.73,0:01:50.52,Default,,0000,0000,0000,,Let's restrict the width to 30 percent
Dialogue: 0,0:01:50.52,0:01:55.08,Default,,0000,0000,0000,,so it'll always take up\N30 percent of the page,
Dialogue: 0,0:01:55.08,0:01:59.26,Default,,0000,0000,0000,,and the rest of the page will fill in\Nthe remaining 70 percent.
Dialogue: 0,0:01:59.45,0:02:01.93,Default,,0000,0000,0000,,Generally, whenever we float a `div`,\Nwe have to give it a width.
Dialogue: 0,0:02:02.12,0:02:04.98,Default,,0000,0000,0000,,Because otherwise,\N`div`s try to take up all of the space,
Dialogue: 0,0:02:04.98,0:02:06.67,Default,,0000,0000,0000,,and nothing can wrap around them.
Dialogue: 0,0:02:07.11,0:02:10.97,Default,,0000,0000,0000,,Seems like it also needs a little bit\Nof a `margin: left`, too.
Dialogue: 0,0:02:11.41,0:02:12.85,Default,,0000,0000,0000,,Ah, okay.
Dialogue: 0,0:02:13.40,0:02:18.15,Default,,0000,0000,0000,,Now, notice the footer at the bottom\Nof the contact info for Hopper.
Dialogue: 0,0:02:18.54,0:02:21.67,Default,,0000,0000,0000,,It's doing this weird thing where\Nit's overlapping the sidebar.
Dialogue: 0,0:02:22.12,0:02:23.69,Default,,0000,0000,0000,,And that's because it's "wrapping".
Dialogue: 0,0:02:24.08,0:02:25.95,Default,,0000,0000,0000,,We don't want our footer to wrap, though.
Dialogue: 0,0:02:26.16,0:02:28.20,Default,,0000,0000,0000,,We want it to always be\Non the bottom of everything,
Dialogue: 0,0:02:28.20,0:02:29.62,Default,,0000,0000,0000,,because it's a footer.
Dialogue: 0,0:02:30.04,0:02:32.25,Default,,0000,0000,0000,,To make it not wrap, we can use\Nthe `clear` property,
Dialogue: 0,0:02:32.25,0:02:34.46,Default,,0000,0000,0000,,
Dialogue: 0,0:02:34.46,0:02:36.58,Default,,0000,0000,0000,,and put `clear: both`.
Dialogue: 0,0:02:36.86,0:02:37.88,Default,,0000,0000,0000,,Hah.
Dialogue: 0,0:02:38.11,0:02:40.23,Default,,0000,0000,0000,,We could use\N`clear: left` or `clear: right`
Dialogue: 0,0:02:40.23,0:02:42.09,Default,,0000,0000,0000,,if we only wanted to not wrap around
Dialogue: 0,0:02:42.09,0:02:44.44,Default,,0000,0000,0000,,right-floating elements\Nor left-floating elements.
Dialogue: 0,0:02:44.52,0:02:47.66,Default,,0000,0000,0000,,But usually we want to not wrap around\Nany floating elements,
Dialogue: 0,0:02:47.66,0:02:49.05,Default,,0000,0000,0000,,so we say `clear: both`.
Dialogue: 0,0:02:49.32,0:02:52.13,Default,,0000,0000,0000,,This is starting to look like\Na real webpage.
Dialogue: 0,0:02:52.32,0:02:54.82,Default,,0000,0000,0000,,We have a main area, a sidebar, a footer.
Dialogue: 0,0:02:55.03,0:03:00.02,Default,,0000,0000,0000,,In fact, you now know the CSS properties\Nthat make most webpage layouts happen.
Dialogue: 0,0:03:00.28,0:03:04.73,Default,,0000,0000,0000,,Put together some `div`s with width,\Nheight, padding, margin, float, and clear,
Dialogue: 0,0:03:04.73,0:03:08.38,Default,,0000,0000,0000,,and there are all sorts\Nof webpage layouts at your fingertips.