Ooooh new stuff coming soon (we also have a new cron thingamabobber :D)

Div Layouts

Just as it happened to me, it's likely it'll happen to you: tables are, apparently, outdated. Divs are the "it" way to code, and because they're so flexible, they won't be going away for quite a while.

Tables were originally designed to be stiff and to hold cells of content for representation of statistics and other table elements. But because you could assign a width and height to them, they proved at the time to be quite an easy cheat to web development. And while they still work and won't stop working, a person might as well switch over to the newer technology and techniques before they fall behind.

So, in this guide, I'll be teaching you how to code a div layout (or CSS layouts for fancy people). Now, you have to understand that it requires a fair knowledge of HTML and at least a bit of CSS to understand how these layouts work. And before I start I have to tell you that with something as flexible as divs, there is more than one way to code things: I'm merely presenting you with the style I'm most comfortable with.

Your simple, easy, 3-column div layout.

As with all layouts, the best way to get started is to design your layout. I'm assuming you know how to design a layout by now - if you don't, go check out our 3-Column Design tutorial.

So, throw together your 3-column design. Here's mine:

A simple 3-column layout with a banner and footer (disclaimer).

Prepare the container.

The thing with tables was that after we assigned a width, we could float it in the center: no problem. But, if we intend to center THIS layout, we'll have to do things differently. With divs, we need to create a container that will make sure the whole layout floats nicely in the center. And this is how we do it:

CSS

HTML

Well, this isn't anything now, but it soon will be. Just replace WIDTH and YOUR STYLESHEET with the width of your layout and name of your stylesheet (.css document) and you're set to go to the next step.

text-align: center: Aligns the whole layout to the center of the page.
margin: 0px auto: As far as I know, this covers up an IE bug. I'd leave it in.

Add in the banner...

So, the next step is to cut out the banner from your original layout design, if you haven't all ready. Make sure to have the height handy, because you'll need that:

CSS

HTML

With luck, your beautiful banner will show up centered on your layout in perfect condition, as long as you fill in the required BANNER BG and HEIGHT areas.

float: left: This literally picks up the <div> element and throws it as far to the left and top as it can. Using this is necessary: eventually after we get in all the divs of the layout, you'll see that all of them are floated and thusly crammed against each other to make a tight-fitting CSS layout. (sorry if that's corny, that's the best way I can explain it.)

The frame

This part is only one div trickier, but it's fairly simple nonetheless. You won't be needing to cut apart three separate menu/content BGs; just take one snapshot of the leftmenu/content/rightmenu width all the way across the layout. I won't get into the mechanics of why you need to do this, just understand that because divs are so flexible, assigning them their own BGs would inevidably throw your layout off massively because they only stretch to the required height (hack wheeze I'm done).

Take a snapshot just like this. It should span the whole width of your layout.

CSS

HTML

text-align: left: Well, you don't want all your text centered within the layout itself, do you?... No, of course not. So we use this to reverse the centering effect.

The actual menus and content...

Now we have to add in the actual menus and content. This is simple.

CSS

HTML

And last but not least...

... The footer. It's just the same as the banner, really.

CSS

HTML

Last words!?

Erm... well, honestly, I just hope everybody understands this tutorial. If you didn't, just copy down the CSS and HTML from the last set of textboxes (the ones directly above this text) and replace the values with actual correct links and sizes. Otherwise if you still don't get it, please contact me and I'd love to help!

See the finished product!