CSS Grids and Flexbox for Responsive Web Design Overview of Floats
This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Overview of Floats" Lesson
>> Jen Kramer: So floats are one of the original hacks for layout. When I started back in 2000, started laying out at web pages, we had tables and that was how we laid out web pages. Because we had nothing else, floats came along shortly thereafter. This was a much nicer way of laying things out but all floats wherever intended to do was to float an image on a web page.
[00:00:22] Make it go over to the left, wrap the text around it really nicely, kinda of like we are accustom to seeing in print. It was never really intended to layout whole web pages but we had nothing else, and the markup was fairly clean. Of course, table-based markup convey something entirely different.
[00:00:39] So floats were something that we went ahead and took advantage of. And we have taken advantage of now for load these many years. So remember that they are a hack for layout. Although, they are very cross-browser compatible because they have been around for really long time. They have rows and cells right, so if you think about your favorite responsive design framework.
[00:01:02] There is typically row, instead of the row, there is a series of cells. One row has nothing to do with the next row in terms of layouts, this is just typically the way that it works. The rows typically again, most of the responsive design frameworks, the rows are responsible for clearing the cells, because if you float, you must clear.
[00:01:23] If you float, you must clear. Let's say one more time, if you float, you must clear. And I say that because many of the problems that we encounter as we layout web pages, and we don't understand why something happened is because you floated but you didn't clear, okay?
[00:01:41] So don't forget to clear when you float. The source ordering is going to determine the display on the page. Now, so it depends on what order your HTML is, that's how things are going to display on your web page with floats. With a minor exception, it is possible to reorder some of these things like make the left column on a desktop appear underneath the content.
[00:02:06] Let's say on a mobile phone, but this kind of rearrangement is fairly limited, all right. Fairly limited is to what we can do in terms of rearranging things on screen. Wait till you see what we can do with grid. Okay, one of the major disadvantages with floats are equal column heights, right.
[00:02:26] So we can have a wonderful row, we can have a series of cells in it. They're all different heights, especially when we go from, say, a desktop size to a tablet size and things wrap around, we commonly run into issues. So here's some diagrams of what I'm talking about.
[00:02:43] Here I've got a row, here is a series of cells inside of that row. Let's say that they are all marked up in the following way. Those of you who are standards compliant people, yes, I've just done this all with divs. But if you notice, we don't exactly have the most interesting content in the world, so we don't need any semantics at all, this is just done with divs.
[00:03:04] So we have a row on the outside, we have a series of columns inside of this. And then typically, the way the code is gonna look is something like this. So we have some type of mechanism for clearing a row. Whatever formula it is that you like for clearing a row, there it is.
[00:03:22] That's my methodology. You may have something else. And then, for our column one here, we're going to have code that looks like this. And typically, it consist of, we're gonna float an element off into your left. We might give it some margins so that we have space in between our cells.
[00:03:41] And then of course, we have to give it a width, otherwise we won't wind up with things next to each other as you go across the page. So there's that formula right there. If we wrap via a media query, let's say, we have a range here for this media query, we might change the width of the column at this point in time.
[00:04:00] And hopefully, these cells will stack on top of each other, so very nicely, all right? Hopefully, and then when we go to mobile, maybe these things stack on top of each other as they go vertically down the page. So we have a width, a margin and a float.
[00:04:14] Maybe we turn the float off and say float none. And this, of course is just displaying the HTML in source order. Okay, here's the big problem with floats, right there. We wind up with a long one, a short two. Three tries to reach around and go underneath of one.
[00:04:59] All right. If we wanna rearrange the columns, we write crazy code like this. So we set our columns to have a position of relative. Relative positioning means that, we are going to take our particular element on the page, we can pull it out of the normal flow by using our properties of left, right, top or bottom.
[00:05:22] But the space that that element used to occupy is preserved, as opposed to absolute positioning, where we pull it out of the normal flow and that space is collapsed. So here what we're gonna do is we're gonna push it over to the left or in a positive or negative direction.
[00:05:37] So that's what we have going on here with this code. Does anyone know in the very first declaration on this with the square brackets here? Anyone know what kind of selector that is? No one has any idea. Okay, so this is called an attribute selector. This is one of the coolest selectors I think is out there, all right, it's called an attribute selector.
[00:06:00] So rather than selecting your HTML tag, right? We're creating a class. What we're doing is we're saying here, for any HTML element with the attribute of class.
>> Jen Kramer: Somewhere inside of that attribute, that's the *=, it can be at the beginning, at the end, there's actually a number of these.
[00:06:22] The operator here can be portrayed in a number of different ways, to beginning the string, to end the string, to blah, blah, blah, blah, blah. There's a whole bunch of them, you can look them up. But this particular operator says, anywhere within the string contain col-. So the cool thing about that is that selects all of our column one, column two, column three, column four.
[00:06:44] All of our various classes are now affected by that one declaration. Sweet, all right. So attribute selectors. By the way, my favorite trick with attribute selectors, if you say href="http: you can now tag all of your links that go off site, maybe with a little background image that indicates it goes off site.
[00:07:08] If you use that, http*=" .PDF, you could stick a little PDF icon after every link that has a PDF. There you go, worth the price of admission just for that, awesome.