This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Float Exercise Setup" Lesson
[00:00:00]
>> Jen Kramer: So we're going to go ahead and get started with our very first exercise for today. If you take a look inside of your files, I don't show you where exactly. Folder number one is called the intro-float. Look inside of the begin folder. What we're going to do is we're gonna create a 4-column floated grid with the given starting files.
[00:00:20] And we're gonna include two break points for that. You can pick wherever you wanna do those break points. We'll call it three layouts, and then we've called them broadly desktop, tablet, and phone. Although we know that phones are now the size of tablets, and desktops are the size of phones.
[00:00:35] And I know it's really crazy but they're still handy to have these sort of buckets to put things in. If you have extra time, you can look into how to equalize those columns, so they wrap without breaking and you could also consider reordering in row three. So, let me show you the files and we'll get started on that.
[00:00:59]
>> Jen Kramer: So here, close those. What we're going to do, is we're going to go into the day-1 Flexbox folder. We're going to go into Chapter 1, into to Flexbox. We're going to go into the Begin folder. Going ahead and open up floats.html. This is your starting HTML.
>> Jen Kramer: And if you go into floats.css, you'll see that we have some starting CSS for it.
[00:01:31] I'll go ahead and display this on a page for you. So, this is what this looks like right now. We have a whole bunch of pie as I promised, pretty simple. We have a heading, an image, a paragraph, and a read more length it goes to various websites, okay?
[00:01:47] So, a whole bunch of stuff that's stacked on top of each other. In the HTML, if you take a look, I've made a comment for you At the start of what should become a row. So for row one, what I'd like to see is four boxes going across, one, two, three, four.
[00:02:04] For row two, I'd like to see two boxes spanning two rows. So a two and a two, okay? Row four, which should actually be row three, sorry, row three. A narrow left column and a wider right column so like a one and a three kind of combination. And in row four go ahead and make one big giant, huge, fat column.
[00:02:28] In your CSS, you'll see that we have the following, the following code. So, let's go through this, a little bit of this really quickly, so you understand what's going on here. The first twelve lines of this style sheet, does anyone know what's going on here with this? The first twelve lines of floats.css, your beginning style sheet.
[00:02:52] Do you know what's going on in those first 12 lines of code?
>> Speaker 2: Has to do with padding?
>> Jen Kramer: Has to do with padding? Hmm, not so much.
>> Speaker 2: The way that it calculates the width of the box.
>> Jen Kramer: It has to do with the box model. Yes?
[00:03:13]
>> Speaker 3: Initializing it?
>> Jen Kramer: Kind of initializing it. Sort of, okay. So, if we think about a box model, right now, right? You all remember the box model? Content, padding, border, margin, right? And if we were working on adding things up. Say, a total width of an area. We add together what to get a total width?
[00:03:34] We add together the margin left and right. The border left and right. I'm looking at you, Peter, because you-
>> Peter: Padding.
>> Jen Kramer: Yeah.
>> Group: [LAUGH]
>> Jen Kramer: The padding left and right, and the content in the middle. The content is what normally get declared as with colon whatever it happens to be, that's just content, right?
[00:03:51] Okay, so this, that’s called the content box model, by the way. This declaration that’s on the top here switches us to the border box model. So, what the border box model says is now when I say width colon on my screen. We’re going to have the actual width of the content plus the width of the padding plus the width of the border.
[00:04:14] All of those things together becomes width colon whatever that number happens to be. So we have now width and margin as we total things up on the page, does that make sense? Okay, so that is the concept of the border box. Now, border box is not an inherited property.
[00:04:34] As you know, some things are inherited in CSS, and some things are not. So in our first declaration, from lines three to five, the html tag we put this border box declaration on it, 'coz that's the very first tag in our document. But then we want to have that same property inherited by everything else, right?
[00:04:51] So in lines 8 to 12 here, we say *. Everybody familiar with * as the selector? What does * mean?
>> Speaker 6: All?
>> Speaker 7: Everything.
>> Jen Kramer: Everything, so we say everything in the universe and everything that comes before that and after that. Inherit the box sizing model from HTML, okay?
[00:05:11] So this is a little incantation that you can stick at the top of your CSS and make your math life so much easier when working with layouts. I have given you the reference for that on the top here in line two, that's Paul Irish who wrote about this.
[00:05:25] Box sizing using border box, for the win. All right, you could go read about that. Okay, so what I'd like for you to do then is to go on ahead and you can read the instructions again that are inside of the folder number one. I'd like you to take, let's see we're at ten o'clock, why don't you take until 10:30.
[00:05:44] And going ahead and tackle some of those float-based layouts. And when we come back and reconvene at 10:30, I'll show you what my solution is. Based on what I'm seeing here in the classroom, some people have some common questions and problems for working with this particular exercise. So I'm looking at the files from the end folder.
[00:06:02] If you take a look at the files from the end folder here. You'll see that we have a layout that looks kind of like this in my Martha Stewart colors, an homage to the 90s. And what we've got here, if you think about this as a desktop layout, we have row one with a series of four boxes.
[00:06:21] We have row two with each piece of content occupying two columns. We have row three, where we have a one out of three. And then, we have our final row where we have a piece of content occupying all four columns. So, if this is as far as you can get in the time that you have working on this particular exercise, that's great.
[00:06:41] Just write it for desktop. Don't worry so much about the media queries. If you were to shrink this down, let's say to quote tablet size, our screen is gonna look like, there we go. So, maybe we have a two and a two. So our row of four switches to two over two, okay?
[00:07:05] Maybe our second row, the two in the two, maybe they stay next to each other, maybe they stack. These are design decisions, so there's no absolute answer on this, either of those would be acceptable. For the one in the three, normally that would be your one column will have things like navigation or advertisements or other kinds of sidebar-ish sort of information.
[00:07:31] And then the three column would normally have like the article or the main focus of the page. So I've just stacked those two on top of each other, a one and a one. And then the final row of course, just continues to shrink down. And then when we get to mobile dimensions and we stack these all on top of each other.
[00:07:48] Then obviously everything just stacks on top of each other one after the other, straight on down the page. In terms of your approach, remember that there's two components to putting together a float-based grid system. One is the row, one is the individual cells. So the individual cells are typically gonna contain a width.
[00:08:11] They're gonna contain a float, and often they contain a margin, all right? And remember that since we're working with the border box and we're working with four columns, the math becomes really easy. So if we think about our widths in percents and our margins in percents, then we have four boxes.
[00:08:32] And let's say each one of those is 20% wide, and if we have a marging of 4% say on the left We have five of those. So the math will wind up working out such that you'll wind up with a total width of the row of about 96%.
[00:08:48] And the extra 4% is as wide as you have for the margin anyway. It'll wind up on the right hand side. So you can take a look at the end state if you're still wondering exactly how all of that math works. But remember, so the cell is going to have width, it's gonna have a float property associated with it and a margin property.
[00:09:10] The row itself does the clearing, so you need some kind of formula to do the clear on that, because if you float, you must clear, remember that? So each row will have its own clear associated with it, the cells are what is floated.