How to Make a Layout

As always, we need to set up our page first.

Okay, now here's how a DIV layout works: everything, EVERYTHING is contained in a DIV, which can then be positioned anywhere in the layout with CSS. You might have also heard the term "container" before. There are no solid "walls" in DIV layouts like there are in tables, which is why we sometimes need a container DIV to make boundaries within other DIVs inside it. Because we are making a stretching layout that fits in all resolutions, we won't need containers, but if you want to make the layout more flexible (for something, say, a styleswitcher), then a main container to create boudaries is a good idea.

But that's all irrelevant to this layout, so don't freak out if you didn't understand anything I said. Everything on the layout is contained within a DIV, so make your first DIV for the banner:

Guess this needs some explaining, eh? Well, we gave the DIV for the banner an ID of "banner." IDs are always written in the CSS as #. From there, we can format the DIV all we want with the unique ID. Right now, we're making the banner image in the background. "No-repeat" tells it to only repeat once, and the "center" part obviously centers the image. We need the width to be 100% -- to stretch all the way across the screen -- or else your banner won't be centered properly. Be sure to substitute the ---px in the CSS to your banner height, or else nothing will show up (from now on, we're assuming that our banner is 200px tall).

Next, thing: the navigation bar. Do the same as you did with the banner. Make a new DIV and give it a unique ID, and throw all positioning and stuff in the CSS.

Okay, right there, we just did our first CSS positioning. There are two ways to position things: using absolute position and relative positioning. Absolute positioning sends the DIV to wherever you positioned it (for our example, we made it stick to the left side and 210 pixels down), regardless of any containers or boundaries it's inside. Relative positioning positions the DIV based on where the container is. If the container is 100 pixels to the left, and the DIV is set to 50 pixels to the left, then it will actually be 150 pixels to the left, since it's inside the container. If that sounds confusing, then don't worry about it. Absolute positioning is much easier to work with, and all we need for this example layout.

So, moving right along. Time for the content area:

Sorry for the all caps, but I had to get that point across. See, right now, the content doesn't have any pre-defined width, because it's a stretching layout (you can always use percentages, but then you'll have to change the left navigation bar to a percentage as well). So, if you only have a sentence that stretches half way across the page, that's how long it is going to be -- half a page. As you can see, if it's that short, all your centering will be messed up, since it's only centering within half the page. The best remedy for this is, of course, a disclaimer.

Next, we add the right navigation bar. Same stuff.

...And that should be the end of it. Really simple, huh? If you haven't realized, it doesn't matter which order you put the banner, left navigation, content, and right navigation in the source code because, unlike tables, DIVs don't rely on HTML to order them. You can put the content first, and then the two navigation bars and end up with exactly the same thing. This should be your final result. A 100% CSS positioned layout using DIVs.

Keep playing with CSS some more, and before you know it, you'll be finding out ways to do fixed-width layouts using CSS, as well as a bunch of other complicated positioning methods. :)