1 00:00:00,266 --> 00:00:03,858 When we use `div`s, it's often because we want to divide our page 2 00:00:03,858 --> 00:00:07,577 into different boxes, resize those boxes, and move them around. 3 00:00:07,737 --> 00:00:11,565 It takes a good eye for design to decide how exactly to lay out a page 4 00:00:11,565 --> 00:00:12,719 so that it looks good. 5 00:00:12,767 --> 00:00:16,484 But right now, we're going to ignore the goal of making a page look good 6 00:00:16,484 --> 00:00:18,701 and just show you how to change stuff up. 7 00:00:18,841 --> 00:00:21,652 Let's resize the "official-info" `div`. 8 00:00:21,948 --> 00:00:25,539 By default, a div takes up 100 percent of the available width. 9 00:00:25,768 --> 00:00:29,054 That's why you see the grey box going across the whole page. 10 00:00:29,242 --> 00:00:32,475 But maybe I only want it to take up 300 px. 11 00:00:32,715 --> 00:00:36,700 Well, I'll add another property to the CSS rule up here: 12 00:00:36,700 --> 00:00:39,373 width: 300px;. 13 00:00:40,179 --> 00:00:43,154 That worked, but let's do something more interesting. 14 00:00:43,380 --> 00:00:44,967 Let's use percentage width, 15 00:00:44,967 --> 00:00:49,320 and say that the div will always take up 70 percent of the available width. 16 00:00:50,287 --> 00:00:53,326 Now the text is constrained to that smaller box, 17 00:00:53,326 --> 00:00:55,233 and the `div` has gotten taller. 18 00:00:55,429 --> 00:00:59,136 If we really want to, we can also constrain the height of the box 19 00:00:59,136 --> 00:01:00,584 with the height property: 20 00:01:01,028 --> 00:01:03,231 height: 180px; 21 00:01:03,778 --> 00:01:06,582 Hmm, okay. Something funny happened. 22 00:01:06,807 --> 00:01:09,642 The grey box resized to 180 pixels, 23 00:01:09,642 --> 00:01:13,425 but the text is overflowing outside of that grey box. 24 00:01:13,671 --> 00:01:15,507 Why'd that happen? 25 00:01:15,794 --> 00:01:19,888 That is because of a property we call "overflow". 26 00:01:20,335 --> 00:01:23,893 The default value for `overflow` is `visible`, 27 00:01:23,893 --> 00:01:28,309 which means that the element resizes, but the content flows outside of it, 28 00:01:28,309 --> 00:01:30,118 which looks a bit silly. 29 00:01:30,455 --> 00:01:32,955 What other options do we have for overflow? 30 00:01:33,491 --> 00:01:36,489 Well, we can try `hidden`. 31 00:01:36,984 --> 00:01:40,144 That cuts the content off, trimming it at the border. 32 00:01:40,358 --> 00:01:42,095 That's not what we want though, 33 00:01:42,095 --> 00:01:45,824 because then our viewers won't be able to read all of amazing official info. 34 00:01:46,287 --> 00:01:48,771 We could also try `auto`, 35 00:01:49,107 --> 00:01:52,896 which tells the browser to add scroll bars if the content overflows. 36 00:01:53,078 --> 00:01:56,692 Now I can scroll around inside the box to see the text. 37 00:01:57,070 --> 00:01:59,475 If we want, we can be even more specific: 38 00:01:59,475 --> 00:02:02,712 we can specify different overflow properties for each direction. 39 00:02:02,787 --> 00:02:04,177 For example, if we wanted 40 00:02:04,177 --> 00:02:07,643 to overflow with scrollbars in the y direction, up and down, 41 00:02:07,643 --> 00:02:10,509 we'll just: overflow-y: auto; 42 00:02:10,832 --> 00:02:14,207 but then if we want to trim it in the x direction, 43 00:02:14,207 --> 00:02:16,765 we can say: overflow-x: hidden;. 44 00:02:18,500 --> 00:02:21,419 Be careful any time you're using overflow, 45 00:02:21,419 --> 00:02:24,434 because scrollbars can get really annoying for the user. 46 00:02:24,599 --> 00:02:27,215 Especially scrollbars within scrollbars-- 47 00:02:27,215 --> 00:02:28,829 avoid those if you can. 48 00:02:29,069 --> 00:02:33,974 Now going back to width/height-- we can actually use width and height 49 00:02:33,974 --> 00:02:37,102 for all sorts of elements, like our images. 50 00:02:37,702 --> 00:02:42,168 Now that you know CSS, you can use the width/height CSS properties 51 00:02:42,168 --> 00:02:44,649 instead of the width/height attributes. 52 00:02:44,946 --> 00:02:52,542 Let's make this cat image a bit bigger by giving it an id, "cute-cat", 53 00:02:52,542 --> 00:02:55,415 deleting the attribute, 54 00:02:55,415 --> 00:03:00,396 and going up to our style rule, let's say: #cute-cat { 55 00:03:00,396 --> 00:03:03,128 width: 120px;. 56 00:03:03,585 --> 00:03:06,328 Just like before with attributes, 57 00:03:06,328 --> 00:03:09,027 it's best to only specify the width or the height, 58 00:03:09,027 --> 00:03:12,548 and let the browser figure out the best value for the other dimension. 59 00:03:12,618 --> 00:03:14,679 Otherwise, we'll have a squashed kitty! 60 00:03:14,743 --> 00:03:18,877 Well, okay, that sounds kind of awesome, so let's just try that for a second: 61 00:03:18,877 --> 00:03:20,021 height: 40px; 62 00:03:20,021 --> 00:03:21,726 Haha, squashed kitty-- yay! 63 00:03:22,059 --> 00:03:25,003 Okay, I got that urge out. 64 00:03:25,077 --> 00:03:28,793 I'll be a responsible web developer and delete it now. 65 00:03:29,009 --> 00:03:30,689 The more knowledge you have, 66 00:03:30,689 --> 00:03:33,077 the more responsibility you need to take on. 67 00:03:33,238 --> 00:03:36,070 Just because you can add scrollbars to everything, 68 00:03:36,070 --> 00:03:39,400 and squash all the kitties, it doesn't mean that you should. 69 00:03:39,497 --> 00:03:42,578 Because you're usually making websites for other people to use, 70 00:03:42,578 --> 00:03:47,338 and what you think is hilarious might be what they find super-hard to use. 71 00:03:47,566 --> 00:03:52,323 But if you make a few funny things here on Khan Academy, I won't mind.