Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this movie, I'll show you the same site that's used in the rest of this chapter, but this version uses CSS for positioning instead of tables. This will be a quick overview. If you'd like a more complete discussion, please see my course CSS Positioning Best Practices here on the lynda.com Online Training Library. So here's the site using CSS instead of tables, and here's the same site in our tables version. You can see it's pretty much the same; there are some very slight differences, and that's mostly due to the fact that you can get finer grained control of your positioning with CSS than you can with tables.
And here is the code for this. This is the CSS version. You will notice that there are no tables in here at all, and here is the tables version. You see the general look of it is very, very similar. It's organized pretty much the same, only one is using tables for positioning, and one is not. In the CSS version, we're doing our positioning by using these div tags; for example we have a header div tag here and we have one for the middle banner and we have one for the content, and then way down here there is one for the sideBar. And these are using ID selectors.
ID selectors are useful. We only have one particular instance of a thing on the page, and then here is the CSS for it here. In the main.css file, there is our outerDiv, there is our banner. As we come down here to the mainContent, you'll see the mainContent div, and this one has a float: left on it, and so that's this one right here, and you see it contains all of the HTML for the main side of the site. And that corresponds to this part right here from Welcome to Groundswell all in this left column.
And so that's aligned to the left inside of the outer box of the content, that's aligned to the left using this float: left here in the CSS. Now when we get down to the sideBar, here is our sideBar, so you see that this says float: right, and we look at this in the website. That's this part over here, starting to the right of this vertical rule and down to the bottom. So that's that right column, and it's floating to the right. The left column is floating to the left.
So in a nutshell, that's really all there is to creating columns in CSS. These same columns in the tables version are used using tds inside of a tr, and so when we get down here to contentLeft, we have a td, and when we get down here to the sideBar, we have another td adjacent to it, and that's what gives it the columns in the tables version.
So here you've seen a brief overview of an alternate way to accomplish the same layout using CSS instead of tables. CSS provides some real advantages, allowing you flexibility and control that you don't get using tables for layout. For more about CSS, see my other courses, CSS for Developers and CSS Positioning Best Practices here on the lynda.com Online Training Library.
Get unlimited access to all courses for just $25/month.Become a member