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.
In our last movie we talked a little about the limitations of specifically setting a height on a column. Now we also talked about how difficult it is to stretch the height of a column to match its parent. There are times, however, when crating layouts of equal-column heights is desirable, and for those times, you're going to need to be creative in how you plan and structure your layouts. Let's take a look at a couple of methods that you can use to do that. So I have columns.htm open and columns_faux.htm open.
So I am going to show you what's going on here in the columns one first. If I look at the structure page, I have a header, followed by an article. So I have a wrapper that's going around these different sections. I have one section that has a dialog from Aristotle in it, and then I have another section, or in aside in this case, that has a dialog from Socrates, or as Bill and Ted used to say, Socrates. Then at the very bottom, I have a footer. Cool! So the technique we are going to use has actually been around for a very long time, at least in terms of the history of the web.
If you go out to positioniseverything.net and search for One True Layout, you'll find the origins of this particular technique. So what we are going to do is we are going to kind of do a little bit of a hack. We are going to force those two columns, the section and the aside, we are going to force them way, way, way down, and when I say way down, I mean further than anyone will ever scroll, by using bottom padding. But then what we are going to do is we are going to assign the exact same negative value to a margin bottom for it, which is going to take that wrapper and it's going to move that wrapper back up, just like a window shade would.
Then what we'll do is we'll clip off the content that overflows by using overflow hidden on the parent article. Trust me, it works great! Now if you're wondering how this looks in the browser right now, let me switch over to show you. You can see that we have a two-column layout here. Here's Aristotle and here is Socrates. And as I scroll down I can see that Socrates article is a little bit longer, based upon the width of the column. So I am going go back into my code and what I am going to do is scroll down into the styles where I have this little "styles go here," right on line 73 and I am going to go ahead and create a section, aside.
So it's going to be one of my selectors. And inside this, I am going to go ahead and set that really huge padding. So I am going to do be padding bottom, and trust me, this will not look natural at first. I am going to 1000 ems. That's a lot. Now underneath that I'm going to do a margin-bottom, and I am going to do -1000 ems. So again, we are pushing the bottom of both of those columns down by 1000 ems by using the padding, but then we're giving a negative margin of the exact same value to the bottom of it.
What that's going to do is the article that's wrapping around those two, it's going to basically window-shade, if you will, that article right back up. So in order to clip the content off at the bottom of the article, I am going to create another selector that's an article selector-- now this is our wrapper-- this is going around these two columns, and I am just going to go ahead and do overflow: hidden. If you want to really kind of see what's going on with this, you can apply a background color to it. In this case I am going to do just background rgb (219, 126, 64), because I want you to visualize the role that the article is having in this technique.
So if I save this, go back out to my layout, and test it, there's the background color of the article now, showing it's containing all of this. And check out what it's doing. It's going all the way down to the longest one, because remember, I'm using the same amount of padding on both of them and the same negative margin on both of them. It's coming back up to the very bottom of the tallest one, and then the article is just clipping it off. And that works fantastic. Now just like any other technique, there are going to certain constraints that you have with page layout and design.
So you're going to have certain times when this technique is not going to be effective, but nine times out of ten, it's an oldie but a goodie. It works, and it works really, really well. I am going to go back in and get rid of that background color, save the file, preview it again, and there is our two-column layout with equal-column heights. It doesn't matter which one is taller; they are always going to be exactly the same amount and they're always going to go all the way down to the bottom of the footer. Perfect! Now another technique that I want to show off is faux columns.
Now faux columns has been around for quite some time too. When faux columns first came out, essentially we used background images to handle this technique. It's very similar in the fact that we are going to have a wrapper around our two sections. So if I scroll down in my code, once again, we have that article around the section and around the aside. So the structure is exactly the same. So that article that we have wrapping around the two of them, if we apply a background color to that article, or if we give it a background graphic, one of the things that we could do was create a background graphic that tiles vertically that's a solid color and is only as wide as one of the columns.
And you could actually do two of them if you wanted to, and it would give the illusion that you had background colors for those columns, when in fact, the column height would stop at a certain point, but the background color for the wrapper would continue all the way to the bottom. Now if that's a little unclear, let me show you what I'm talking about. I am going to go ahead and preview this in my browser. You can see that we don't have any background colors on these guys at all right now. However, if I were to go in, and let's just say I go ahead and create an article and just put a background color on that article.
Let's say I go rgb and then (125, 125, 125). That is a gray. Now one of the things we need to do, remember, we are floating both of these columns, so we need to go ahead and contain those floats. And luckily I thought ahead and I applied clear fix to our styles, so I can go right down here in my code and on that article I can class = clearfix. So if I save this now and preview this in my browser, I can see that gray background.
Notice that it's going all the way down, because article is containing these floats and it's stretching all the way down. So in the past what we've done is instead of using a background color, we will use a background graphic, and that background graphic will tile vertically and be only as wide as we need to for the columns. You can do just one background graphic or you can do a background graphic that has two colors in it. So you can really be flexible with it. Now the downside of that of course is you're adding overhead. You're increasing a resource that needs be downloaded when the styles are loaded. What's nice about evolving CSS techniques is that now instead of using a background image, we can actually use a gradient to do the same thing for us.
Now most of time people think of gradients as going from one color to another sort of gradually and sort of fading in. But if you want, gradient color stops can be very abrupt. It can go directly from one color to another one without fading between the two of them. So that's how we can great some of these fake or faux columns, if you will, in our file. So I am going to go back into our code, and I've got an asset that's going to help us out a little bit here. If you go into the 03_09 folder and open up assets, you'll see the background.txt file.
Go ahead and just open that up. And what I've got is I've got some syntax in here that is a lot easier to copy and paste than it is to type. So I am going to highlight all of that text, just copy it, and then going into my faux columns, I am just going to paste it below my existing background. Just to give you a heads-up in terms of what's happening here, we are applying a linear gradient that's going from one color, it goes to 0, and then it goes to 62, changes to white, stays at 62, stays at white, goes to 65.
So at 62% and 65% we have white, and then it switches to another color. So we've got one color on the left-hand side, we've got a gap of white in the middle, and then it switches to another solid color on the other side. Now where am I getting these percentage breaks for the gradient? Well, it has everything to do with the width of these guys right here. So I'm calculating those based on the width of those. And this is a flexible layout, so here, we are calculating percentages rather than pixels. So if I save this, go back in, and preview it now, there are our two columns looking exactly the way it did before.
They look like they're equal heights, but we know they're not. This is actually just the background of our article wrapper that's stretching down all the way to the footer, because the float is being contained, and this is why it's called faux columns. Now this gradient syntax can be a little cumbersome, and I will be honest with you, this is a lightweight version of the syntax. This is not fully cross-browser compliant. I don't have anything in there for Internet Explorer. I don't have anything in there for Opera. So there's a lot more that you can do with the syntax. If you're curious about CSS gradients and you want to learn a little bit more about them and generate the syntax for them, I really recommend this site, The Ultimate CSS Gradient Generator, which I've actually recommended before. You can find this at colorzilla.com/gradient- editor, and if you're familiar with creating ingredients in, like, Photoshop, or Illustrator, it offers you a nice visual editor to create your gradient.
You can even come in and double-click the colors and choose whatever you want. And I am going to make a really horrible gradient, so bear with me on that. Then if you're happy with the gradient--who wouldn't be happy with that?-- you can someone just copy and paste the CSS that it generates for you. You can even go ahead and throw in support for Internet Explorer 9. So this is a really neat online tool that you can use to generate some pretty complex syntax, because the syntax for color gradients continues to evolve all the time. It's a handy tool to know about.
Now, I've just shown you two techniques here, and those are certainly not the only two ways to create columns of equal height. Designers are extremely creative people by their nature, and they continue to find new and very creative way as to tackle all these problems that are inherent to CSS. If you go out and research it, you're bound to find a bunch of articles discussing this very problem. Now I want to encourage you to take techniques like the ones I've shown you here as starting points. Go ahead and experiment with them, try out variations on them that might be better suited for your personal projects, and as you gain experience working with them, try approaching those problems in new ways, and go ahead and develop your own solutions.
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.