Introduction to Web Development CSS Box Questions
This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "CSS Box Questions" Lesson
>> Speaker 1: Can you go back to the CodePen?
>> Brian Holt: I think I have them right now actually, that's an example of this in particular.
>> Speaker 1: I want to ask you a question about the code, I wanted to use two properties.
>> Brian Holt: Is it this one?
>> Speaker 1: Yeah.
>> Speaker 1: So in the CSS in dot blog post there I added overflow and I wanted to use the scroll.
>> Speaker 1: How do I get it to,
>> Speaker 1: When I added more text it just made the box bigger.
>> Brian Holt: So you have to give the height. So if I say height 100 pixels, okay now you can scroll through it.
>> Brian Holt: So overflow applies to the box model. It's just saying what do you want me to do if I overflow?
[00:01:02] If I have more content than I can display what do you want me to do? So scroll is one of them. You can say hidden. And that just says like I don't care what goes on. Just throw it away. It's actually not thrown away. It's just not displayed, all right?
[00:01:16] And the reason why it's constrained like this is I gave it a height of 100 pixels. It's just asking me, what do I do if I can't fit all my stuff in here in 100 pixels? Whereas if I take this off, it'll just expand to however big it needs to contain all of it's stuff and then it finishes.
>> Speaker 1: So if I was gonna style a page and I wanted the box to be a certain size but to be the same size on different screens would I use pixels for that or what would be a better way to do that?
>> Brian Holt: Definitely pixels.
>> Speaker 1: To do the height?
>> Brian Holt: Pixels, yep, yep yep yep. The weird thing about so if I said like 10ems or something like that. height: 10em something like that. So first of all if you don't tell what to do with overflow it just assumes. I want my box to still be this tall and I only want it to take up that much space but let my content flow outside of it, which is why you see this awful text thing.
[00:02:20] You have to tell it no, please actually just do hidden or something like that, right. Or scroll, or auto. I think auto is pretty much the same as scroll. It gives it the scrolling things right here. Okay, so what's weird about is like you know how like old people get on the computer and just like turn off like the magnification of it, right?
[00:02:45] By if you Cmd-+ or Ctrl-+ makes it huge, ems will mess with the width of that point, right? Because it's relative to the font size and they're making the font size bigger. Whereas pixels will stay the same. Right, and the pixels don't actually get better, but the bigger, but the ems do.
[00:03:06] That's why for the most part you want to avoid doing widths and heights in ems.
>> Speaker 3: Do you want them to get bigger if someone wants to?
>> Brian Holt: Depends, right? Like it just depends on what you want them to do but like if you have two boxes that need to be side by side to each other, if they start getting too big then they're gonna stack on top of each other right.
[00:03:26] Right, because they're gonna run out of room to go sideways, so it depends on what you're trying to accomplish, cool.
>> Speaker 4: A couple of questions from there's one on the CSS where we uncovered how to debug it with Chrome dev tools.
>> Brian Holt: Yeah.
>> Speaker 4: You had gone over that and then the flexbox model.
>> Brian Holt: We're not gonna go to flexbox.
>> Speaker 4: We're not.
>> Brian Holt: No way. [LAUGH] Flexbox is kind of complicated, it's brand new, and it's not very well supported. So we are kind of brave, we use it in some places on Reddit but most companies cannot because they have to support old browsers and we don't care.
[00:04:04] It's not supported in old browsers so I'm not going to go over it. And it's kind of hard so.