Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
CSS: Page Layouts introduces basic layout concepts, gives advice on how to create properly structured HTML based on prototypes and mockups, and goes into critical page layout skills such as floats and positioning. Author James Williamson shows how to combine these techniques to create fixed, fluid, and responsive layouts. Designers are also shown how to enhance their pages through the creative use of CSS techniques like multi-column text, opacity, and the background property. Exercise files are included with this course.
By now, you might be a little tired of hearing me talk about containing and clearing floats. However, because it is so important to page layout, I want to take a closer look at a specific clearing technique called clearfix, and how it can help make containing the floats in your layouts a little bit easier. Open up the clearfix.htm file, which you can find in 03_04 directory. And if I scroll down, I can see that I have a section with a class of clearfix applied to it, and then I have three divs: One, Two, and Three, and all three of those divs are currently right now floating to the left.
So we kind of know what to expect here; we expect the section, that parent-containing element, to collapse. So I am going to preview this in my browser, and that is exactly what happens. All three of those elements are floating and so the containing element collapses. So back in the day when we first started attempting to clear the floats, one of the things that we used to do is we would put in our CSS these class styles and we would just call them like clear: left, clear: right, clear: both, whatever we want to clear, and we would apply that property to them.
And then whenever we would need clearing to apply, we would apply that class. Now, that still happens a good bit, and I usually have some of those classes in my CSS so that I can clear elements on the page when they exist. But in this instance where you've got a situation where you've got three elements floating inside of a container and nothing underneath it, what a lot of people would do is they would come in and they would do this. They would put in an element like this, like a line break, and then they would apply the class clear: left or clear: both or clear: right, just something sort of invisible, like a line break or a span tag or things like that.
So if I save this now and preview it, you can see that now it's containing the floats. The problem with that approach is that you end up putting in a lot of extra markup, markup that just really should not be there and that's not required for the page to read the way that you want it to. So it was kind of a hack, if you will. Over the course of working with this type of clearing, some very bright people came up with the clearfix method, and we're just going to go through it piece by piece so you can kind of see what this does for us. So I am going to come up here to my clear: left style that I added and I am going to modify this a little bit.
First off, I am going to change it to clearfix. Now, some people use CF, some people use clearfix, some people are using the class called group so that it has some semantic value to it. It's whatever you want to do. This takes advantage of not a relatively new CSS property but one that only over the last couple of years has been supported across the board by browsers. So this technique still has problems with older browsers, and we'll talk about how to deal with those in just a moment. But it uses something called generated content.
So after clearfix, I am going to type in a colon, and then I am going to type in after. So what this is saying is it's saying that, hey, any element that this class is applied to, I want you to generate some content directly after this. What I am going to do is inside the selector, I am going to go ahead and create some content. So I am just going to use the content property and I am going to create a blank section of content here. So the empty quotation marks that you're seeing here, that's an empty literal string. So it means create some content, but don't create anything. Put nothing there.
So it's just going to put sort of this empty literal string in there, if you will. Now, in older versions of Firefox, like versions 3.5 and below, you would need a period there, because trying to pass nothing in this generate content would cause Firefox to go a little squirrely, but since 3.5 and above, it's had no problem with that whatsoever. Now, the next thing I am going to do is change the display property to block. So this is basically saying that this empty bit of content here, this no text, go ahead and display that as a block-level element.
And then finally, I am going to come in and set clear to both. It's generating content. Now it's still inside the closing tag, just so you know where generated content goes. It's till inside the closing tag, but it's at the very bottom, and it's the last thing in the element now. So we have the sort of empty piece of white space that's displaying as block, and it's being told to clear. So now all I need to do is go down and make sure the clearfix class has been applied, and indeed it has. And if I save this and now if I test this in my browser, you can see, once again, our floats are being contained, and now we're doing it without any extraneous markup. We've got no extra markup going on whatsoever.
We're just using the generated content. It would be lovely if the story would end right here, but unfortunately, obviously this is a technique that has evolved over the years, because certain browsers have trouble with parts of this. One of the things that causes problems in Internet Explorer is the whole concept of generated content before and after. But essentially what happens is is you end up with some collapsing margins on the top of the element that you don't have towards the bottom of it. So we're going to modify this a little bit. I am going to change this by adding another group selector to this.
I am going to do clearfix:before, clearfix:after. So I am modifying the selector itself so that it's generating content at the top of the element and the bottom of the element as well. I am also going to change the display from block to table. This is a recent addition, and I am going to show you where you can read more about that. But what that does for you, instead of generating block-level content, it generates sort of empty table cell. You won't see it. It's not visible, and you won't have the collapsing margin problem, which is awesome.
Now, we don't need to clear the content at the top of the element. If we do that, it can really negatively impact our floating. So I am going to cut that out of that selector and then create a brand-new selector down here to do my clearings. So I will do clearfix:after, and we're going to do clear: both. So what this is doing is it's generating content at the top and the bottom of your element. It's generating an empty table cell, which will prevent any collapse of margins from happening, and then the one on the bottom is being cleared.
So if I save this and preview and test it, we don't notice any difference. It really works the same, but now it's much more solid, in terms of the code involved. Now, I mentioned that this method still does cause problems with certain browsers, and Internet Explorer is one of those. Now, I am going to defend Internet Explorer here because it's not so much a bug in Internet Explorer; it's how Internet Explorer deals with elements on the page that has something that we call hasLayout. If you're really serious about page layout in CSS, you need to go up to Microsoft's developer blog and read the history of hasLayout and kind of what hasLayout is and how Internet Explorer deals with it.
So what we're going to do is we're going to create another style tag. Now, this thing may seem kind of weird, but we're going to create one style tag inside of another one, and inside this one, I am going to do a little comment here that says For IE < 8 (trigger hasLayout). So essentially, what we're doing is for older versions of Internet Explorer, we need to go ahead and trigger hasLayout. Now, this needs to be a comment, so I really should have commented that out at the beginning of this. So bookend that statement with a /**/. And below that I am going to type in my clearfix selector, and I am going to do a zoom of 1, which is 100% zoom, which means don't zoom.
But just by applying zoom on the element, you trigger, in Internet Explorer, hasLayout, and it will go ahead and do your clearing for you. Now, obviously I only want Internet Explorer to apply these styles, so what I'm going to do now is I am going to wrap that sort of style tag that we've got there in a conditional comment for us that is Internet-Explorer-specific. So I am going to open up a tag and do a little comment here, !--, and then in bracket notation, I am going to type in "if lt," less than, "IE 8." Internet Explorer is the only one that's going to respond to that. And then I'll go ahead and close that, and then I am going to go down to the very bottom of this, and once again, the explanation point, and in bracket notation I am going to do endif to end that conditional comment and that ends with -->. There we go! You can just copy and paste that from the finished file if you like, if you don't want to go to the trouble of typing a lot of stuff out.
Now typically, what I would do, obviously most of your styles are going to be linked to pages, and typically I will have a link to a style sheet that is IE- specific, and these styles will just be sitting into that style sheet. I won't actually go to the trouble of doing that on every page. That doesn't seem very efficient, does it? So I am going to go ahead and save my file. And I know that seems a little complicated at first, but the beauty of this, you just write the code once in your styles, and you simply apply the clearfix class to any element that you need to contain the floats inside of it. It's very simple, and it may be slightly non-semantic in terms of the classes you are applying, but it gets the job done without a lot of extra markup, which is even better.
If you want to learn more about the clearfix syntax, its history and understanding the concepts behind it, I have a few articles that I am going to recommend you read. Now, I would start with--and I know I am going to pronounce his name wrong, so I am terribly sorry about this--Thierry Koblentz. I hope that's close. But Thierry is, he wrote a series of articles on clearfix that is just wonderful. Now, the first one is "Everything you Know about Clearfix is Wrong" and this does a great job of explaining exactly how clearfix works and how those cross-browser issues evolved, specifically Internet Explorer.
You can find this on his blog tjkdesign.com. Just search for everything you know about clearfix is wrong. He also wrote another article called "clearfix Reloaded + overflow:hidden Demystified," where he talks more on those two methods and sort of refines the syntax for clearfix, and you can find this on Yahoo!'s User Interface Blog, the yuiblog.com. Just search again for clearfix-reloaded. And then finally, I want to point out Nicolas Gallagher's really, really cool article, "A new micro clearfix hack." This goes ahead and takes what Thierry was doing and extends his work a little bit.
It reduces the amount of code and is, for the most part, the syntax that we used in our movie. So if you check out this syntax, it's going to be very similar to what we used in our file. Now, I know this syntax can be a little bit hard to remember, so for the techniques like clearfix, I typically recommend saving the code as a snippet and then just simply reusing it for each project.
There are currently no FAQs about CSS: Page Layouts.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.