Introduction to Web Development CSS Document Flow
This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "CSS Document Flow" Lesson
>> Brian Holt: Document flow, everyone has been waiting for this, this is the big moment! Just kidding, you are going to be very disappointed if this was your big moment. Okay, CSS has a concept called float, right? So right now if you saw all those divs they are all on different lines, right?
[00:00:23] Let's say I have a section on my webpage here and I want another section of my webpage to be right here next to it. How do I do that? So there's a thing called float. He said, so I want you to move yourself as far to the left as you possibly can, and then you tell the thing blow it, please move yourself as far to the left as you possibly can.
[00:00:43] And so they'll start stacking each other until they can no longer fill on the same line, and then what they do is they wrap underneath it and then they start floating next to each other again. So, how many Pinterest users in here? Pinterest does a really cool thing, it's not quite floats, it's actually more advanced than floats.
[00:00:58] But notice they kind of put everything right next to each other, right? That's kind of what we're talking about here. So, I said as many block level items. So, floating will only work on block level items. So, you can't float a spin, that doesn't really make sense because a spin is already kind of moving next to each other.
>> Speaker 2: [INAUDIBLE].
>> Brian Holt: Yes, I see where you're coming from, and there's, it does do that, but it's so much more complex than that.
>> Speaker 2: Line floated, it actually move it exactly the way it was in a previous state.
>> Brian Holt: Okay, yeah, I can see why you're saying that.
[00:01:47] [LAUGH] I hadn't thought of it like that, so.
>> Brian Holt: Yeah, we'll go through some examples, and then go through it some more. So in fact, let's just jump in to a CodePen here.
>> Speaker 3: In chat they're kind of wondering how does Pinterest do what they do like using grids or?
>> Brian Holt: It's actually quite complicated and people have tried to replicate it and they did a really bad job. There's a plug in called Masonry that kind of replicates it and it's awful. [LAUGH] So they have a bunch of really smart people that got paid to do it.
>> Brian Holt: Okay, so. Good question though. I believe this is just all the same blog HTML, and you can look over it. But it really ends up being the same as what we've been looking at previously. Now I have blog post 1 and blog post 2 being next to each other.
>> Brian Holt: Okay? And now I have floated them next to each other. So notice, this one's longer than this one.
>> Brian Holt: Yeah. So let's talk about how that happened.
>> Brian Holt: Codepen is doing this weird thing. Anyway, whatever. So here I just changed the font family, changed the color of the text.
[00:03:21] Apparently, 333 is a shade of black that's less offensive, it's less stark. So did that. Made the background color gray or we can change this to be like red or something like that, right, whatever.
>> Brian Holt: And then here I've defined it to be a width of 45%. So you can define width in terms of percentages, right?
[00:03:44] It is gonna look at its parent container and say, how wide are you? And then say, okay, I want to be 45% of whatever your maximum is. So in this particular case, we're saying the width, its parent is the body. So the body is the width of the entire page.
[00:04:00] And so I want to be 45% of that. And then I said after that, please give me 2% margin to the right. So what's cool about this is, I guess it's kind of but it kind of resizes itself as the page resizes. It's kind of responsive design, kind of not really, cuz as you can see, it messes up right here.
>> Brian Holt: And but let's actually talk about that for a second. If I go too small, what happens? It wraps. That's what this floating thing does is it tries to fit as much crap as it can on one line. And once it does, it just kind of shoves it down.
[00:04:40] If your things are not uniform height, this can cause some weird behavior, right? Because if I have super long div right here, and I have things wrapping, it's gonna wrap underneath those things. But not always. Because a floated element cannot be higher than a previous floated element, right?
[00:05:03] So if I have thing A, actually hold on. I have a good example of this on my CodePen.
>> Brian Holt: This one right here. Luckily I did this. So I have two fatties right here and a skinny right here, right? And these three skinnies. Notice that these skinnies are not pushing up all the way to the top.
[00:05:37] Right. It's cuz this fatty right here is actually higher in the HTML. And so these skinnies can actually push past the fatty. That fatty is as far high as they can go. And the difference is why they're going to the left and right is these are being floated to the right and these are being floated to the left.
>> Brian Holt: All of this is to illustrate floats can have some weird behavior. This typically would not be a problem, because what I would do is I would just float everything to the left. And, you typically would not float to the right and float to the left and try and have the pushing of behavior.
[00:06:14] But, that's kind of what I was getting at there.
>> Brian Holt: Okay, so, again like if I change this to be like 50% they're gonna wrap, right? Because it's trying to have 50% width and then 2% margin to the right. That's 52% or 104% if you try and slam them together.
[00:06:39] Do the math. 104 is actually bigger than 100, so it cannot fit on the same line, therefore it wraps. Okay. So something kind of interesting that we can do. If I say float: right, and move this back to 45. Check it out. Now blog post 1 is on the right, whereas if I say float: left, they're gonna swap.
[00:07:08] Kind of sweet, right? And it just has to do with the order that it's happening. So it's gonna take blog post 1, render it, and then say okay, shove yourself to the right. And then it's gonna take blog post 2 render it, and then shove it to the right and that's kinda how floats work.
[00:07:24] Questions about that? Does that make some sense?
>> Speaker 3: In the chat room, they want to know how to make them equal heights, so. I think by just putting that in there?
>> Brian Holt: The x box makes equal heights really easy [LAUGH]. Equal heights is another pain in the ass.
[00:07:40] So well the easiest way is like if I say height: 200 pixels, right? And then say overflow. Scroll or something like that.
>> Brian Holt: Okay. Now they are equal height because I've actually pre-defined their heights to be 200 pixels. Now if you want them to be both responsive and the same height, that's a trick.
[00:08:13] I hesitant to show you because it's a little weird. All right. We'll show, someone might find it interesting, if this blows your mind, for God sake just ignore it. Okay, so.
>> Brian Holt: This is, you'll find with CSS, it's so old and so broken, that you kinda have to hack around it sometimes.
[00:08:36] So I'm gonna say height: 0. So these are all of a sudden gonna disappear, right? Cuz they're gonna have no height. Then I'm gonna say, padding-bottom and I'm gonna say like 50%. So what happened here? Notice that they actually are the same height now. And they kind of size dynamically as well.
[00:08:58] So what they're doing is they're maintaining aspect ratio, right? Like you think about your TV and it's like 4:3 or 16:9. It's essentially what you're doing it here. Padding-bottom is, despite the fact that it's actually a vertical measurement, it's measured in terms of its width. And so if I'm telling padding-bottom to be 50%.
[00:09:17] I'm instructing it that you're supposed to be 50% of whatever your maximum height is, or maximum width, sorry. If that doesn't make any sense, that's totally cool. That's advanced CSS, don't worry too much about it. But it's kind of cool, right? A lot of our website is built on this principle.
[00:09:36] It's total hack. Right? Okay.
>> Speaker 2: I have a question.
>> Brian Holt: Yeah.
>> Speaker 2: When you're considering your margin. [INAUDIBLE]. You said you have 200 for width, right? And everything you do under, say, under your blog post, so everything you do on your blog post, and say that's 200, does everything need to add to that 150, what did I say, 200?
[00:10:15] Whatever I said. I'm sorry.
>> Brian Holt: That's okay.
>> Speaker 2: Does it need to add up to that web size so that you can have enough room to get all your content, images on that page?
>> Brian Holt: Okay, so, let me rephrase what you're asking and see if I understand.
>> Speaker 2: Okay.
>> Brian Holt: You have a parent container that's gonna be 200 pixels wide. You're asking if I want everything to fit inside my container, did they need to add up to 200 pixels?
>> Speaker 2: Right.
>> Brian Holt: The answer to that question is it depends on what you want. There's sometimes that you want your content to flow outside of it, right?
[00:10:49] So, there you've seen those full bleed, Kickstarter has one I think at the top, or even Redditgifts so let's just look at Redditgifts. They have this full bleed image, right? So, sometimes you might want those images to flow outside of it, so you're only looking at part of your image, right?
[00:11:10] And that's how they achieve that technique is they actually have a flow outside of it but, its parent actually can't contain the full width of it. If you want everything to fit on one line, then yeah, it needs to be less than or equal to the parent's width.
[00:11:26] Does that answer your question? Cool.