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 the Javaco site, without the columns, which is why it looks kind of weird and in this video, what we're going to do is create those columns or at least a basic version of those columns using floats, that is by floating the columns. So, in our markup, where there are two divs, there's one, this div, with an idea of content which encloses all of the main content, which we can think of in our design as the quote, unquote, left-hand column and then there's a div with an idea of sidebar, which has all the stuff that goes on the right in our design.
So the first thing we are going to do here is we're going to float the content div and give it a width, I'm going to give it an em-based width, cause I'm all about the ems as I'm sure you are and 40em is, you get 40 times the font size. So if the font size happens to be, you know, 15 pixels than it's going to be 600 pixels wide. I'm just going to hit the reload and I'll warn you right now, that as strange as this looks, when I hit Reload it will be worse, but just for a moment, don't panic.
If you squint, you know, really hard and look closely you can see that the content div, The Legendary Origins of Tea bit, is actually over on the left. Instead of taking up the whole width of the document. Now, I'm going to take that sidebar and also float it. This one, we're going to float to the right and I'm going to give it a width as well, an em based width as well, I'm going to make it 17em and when we go back and hit Reload, there you go, the sidebar is now floating to the right and has that, you know, specific width. So, these guys are floating to the left and to the right respectively, and are keeping themselves to their sides and if we actually shrink the browser window down a bit, you can see that they get closer and closer until all of a sudden the sidebar disappears. It actually doesn't disappear, it just drops down below the left floated content bar, because the way the floats work is if you have two close there, next to each other, that's fine as long as there's enough room for them both, but if you get to the point where they can't go next to each other without overlapping, then they don't overlap, which ever one comes second in the document source, drops down below the first one. That's just the way flows are defined to behave. So, because there's not enough room here for the sidebar in the content divs to float next to each other, the sidebar since it comes after the content div in the markup, in the document source it drops down. Now if we scootch this back out, eventually, there is enough room and suddenly they snap back into place, which is kind of an interesting effect, but clearly not really what you would want in a design that you deploy.
There is also the problem of this great big gap between the two. There's one way to deal with that, although it's not necessarily ideal. Instead of floating the sidebar right, we can float it to the left and if we hit Reload, what you can see is that the content div floats the left and then, that leaves space for the sidebar div to float, and since it floats to the left, it floats left until it comes right up against that content div, like literally, they are effectively touching, and the reason they are next to each other, is that there's enough room for them to be next to each other, but again, if we take the browser window down, when we get to a certain point, there goes the sidebar, it has dropped down and this time, since it's floating left, it drops down below the content div, but it goes all the way to the left instead of to the right, because before we had right floating, now we have left floating.
If you're in a situation where you have one float dropping below another and you're not quite for why a good way to diagnose it is to throw in a background. So for example we might put in a background of FFA on the content div and in that way, we can see its extent and we can, you know, in this case it's as a little leisure, where we can see exactly where it ends. So, no matter, you know, whether the sidebars floated right or floated left, by giving the content div some kind of temporary background, it doesn't matter, you know, what color you use, as long as it's something you either like or can see, or both, this a good way to see the extent of the content.
Now with this set up, we do still have the dropping problem and the problem of the two columns, are so widely separated from each other, at least in this case and that separation can vary depending on the with of the browser window. So in the next movie we're going to discuss how to address both of those by using a little negative margin trick to put these two columns right next to each other, with a constant width, space between them.
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.