Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
CSS gives Web designers control over the appearance of their web sites by separating the visual presentation from the content. It lets them easily make minor changes to a site or perform a complete overhaul of the design. In CSS Web Site Design, instructor and leading industry expert Eric Meyer reviews the essentials of CSS, including selectors, the cascade, and inheritance. The training also covers how to build effective navigation, how to lay out pages, and how to work with typography, colors, backgrounds, and white space. Using a project-based approach, Eric walks through the process of creating a Web page, while teaching the essentials of CSS along the way. By the end of the training, viewers will have the tools to master professional site design. Exercise files accompany the training videos.
What you see here is a situation where I've unfloated the columns for a moment and I've enclosed them in a container div, this is just generally what this sort of thing is called. There's a div that begins right before the content div and it ends right after the end of the sidebar div and these things usually have an ID of container. So there you go, div id equals container. That begins as I say before the content and it ends right after the end of the sidebar.
And this is the background color that I've given it. Now, the reason that these columns are floating is that I've actually written a rule to override the built-in float styles and let me get rid of that now, so that they actually float into place the way they are supposed to and when I hit Reload, there they are. But the container disappeared. Ok, that's weird. Why did that happen. That actually happened, because it collapsed down to have no height at all. So the thing about floats is they don't occupy the normal flow of the document.
The normal flow of the document would be the unfloated, unpositioned, just very generic float of the document, for example this is all normal flow. All right. This is mostly non-normal float, it's mostly floated stuff, because we floated the content, we floated the sidebar and that's all not in the normal flow. In fact, the one thing that is in the normal flow here, pretty much is the footer. Also some aspects of the masthead. So, if you have something like a div, that's containing two other divs and you float both those divs, than the container div has no normal float content, and so it has no height, it has zero height. Now, you might wonder why in the name of all those holly, that makes any sense at all and actually makes a lot of sense if you look at the tea kettle image that we floated to the left, remember that's an image inside the first paragraph, that's then been floated to the left and it's sticking out of that first paragraph.
If it didn't, if elements always grew to contain floats that were inside of them, then what we would have is the first paragraph, and there would be a big blank space before the next paragraph happened, because the paragraph containing that floated image would have to expand the containment. That would be horrible, nobody would like that. So, because floats were really only intended to do things like taking image or some other element, put it to the side and let other text flow around it, that's how they're written, but when it comes to layout, that's not what we want, right. We want this container div to surround visually the two floated columns. So, there are a couple of ways to address this.
Perhaps the most obvious one is the fact that floated elements do grow to contain any floats that they contain. So if we were to float our container then, it would grow to contain the floated columns. If we hit Reload, it's back. There it is, you can see it, it's wrapped all the way around, but there is a potential problem there, which is that, let's say, instead of the background I wanted to do, I'm going to use red, because it will stand out.
That's all fine, but then we can't always assume that the two columns are going to be quote, unquote, 100% wide and push all the way out to the edges so what we'll need here really is, if we wanted to make sure, we might say with 100% and that would make this container nice and wide, but notice what just happened. It just got wider than the actual browser window. That's because if you recall, from the first video in this chapter, width is the content width and then any borders or padding beyond that are added to it, so this is now actually four pixels beyond the right edge of the browser window and that will be two pixels of border on either side.
That's not really what we wanted. So maybe there's another way, one where we can sort of let it grow out to the maximum extent, or basically where we can return it to the normal flow and yet think a way into having it contain floats and actually there is such a way. So instead of float left, what we're going to do is overflow auto, and we need to get rid of the width as well, hit Reload, then there we go.
The reason that this is more desirable is that because the div is back into the normal flow is not being floated, then, because of the way that CSS rules are written, that will always expand to be as wide as it can be. Officially speaking it will always expand to fill its parent element, which in this case is the body. But since we didn't explicitly give it a width of 100%, then it expands as much as it can, including things like padding and borders and even margins so the content gets squeezed down a little bit, if necessary in this case.
So that's normal flow behavior, which is not how floats work, as we saw before, but the reason that it's growing, even though it's in the normal floats, growing to contain its floats is that it's been set to overflow auto. Overflow is property that controls how content is drawn if it happens to be taller than its actual parent. So, you could for example say overflow hidden and then if any of this content happen to stick out of the container div, then it would just get clipped off, it would be hidden. That's all interesting, but you might wonder why in heck, the results of overflow auto, would be to grow to contain floats and as it turns out that's because of, a sort of an obscure corner of the CSS specification, which says, effectively that, I mean it doesn't come right out and say if there are floats then the overflow auto means that a normal flow element will grow to contain them but because the way our flow auto was described, this is one of the things that it needs to do. So, if you want to track down the descriptions of how overflow works in the CSS specification, you can certainly do that, or you can just sort of accept that this is one of those things that just works by magic and go with it. So if you want to have an element that contains floats that are within it like this container div is doing here, those are your two primary choices, either to float the container, or don't float it and set it to the overflow auto.
There are currently no FAQs about CSS Web Site Design.
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.