CSS table trick equivalent

...without using absolute positioning

[nquinn]

Hi all,

I'm just beginnging to learn ( and despise troubleshooting ) CSS.

I'm basically looking for a good layout design that incorporates a header, left-nav bar, content, and a footer. I am looking to set it at 750px wide, centered on the page.

I've found this without too many problems. However, I am trying to figure out a way to have the content be displayed BEFORE the navigation in the source code. Since I want it centered on the page, I don't believe I can use absolute positioning to do this.

Example Layout:

[.....header......]
[nav][...content..]
[.....footer......]

Example Desired Source Code:

<div id="header"></div>
[b]<div id="content"></div>
<div id="nav"></div>[/b]
<div id="footer"></div>

Any suggestions? Examples would be fantastic.

-Neil

[createErrorMsg]

Oh boy.

You have several options. One, you can float the content <div> to the right (which puts it first in the source). The problem with this option is that it forces you to give the content a set width (especially if you want ie to cooperate), which may not be desireable. Also, you have to do some css contortions if your content <div> goes longer than your nav bar. They're not difficult to do, but it takes some getting used to.

Another option would be to use the negative margins technique described in an atricle by Ryan Brill on A List Apart. Reading his article is far better than me trying to explain it here, just go to 'a list apart' (.com/articles, no spaces) and search for "Negative margins".

There are other options, I'm sure. These are just the two I use.

Other good places to look for information on multicolumn layouts:
Bluerobot.com
Position is everything.com (no spaces)

Best of luck.

[RammsteinNicCage]

If you want it centered, how about positioning the elements absolutely from the top, but don't position them to the left. Add a wrapper div around everything.

#wrapper {width:750px; margin:0 auto;}

<div id="wrapper">
<div id="content"></div>
<div id="nav"></div>
<div id="header"></div>
<div id="footer"></div>
</div>

To make sure this works with older versions of IE, you might have to do this:

#wrapper {width:750px; margin:0 auto; text-align:center;}
#wrapper2 {text-align:left;}

<div id="wrapper">
<div id="wrapper2">
<div id="content"></div>
<div id="nav"></div>
<div id="header"></div>
<div id="footer"></div>
</div>
</div>

Do either of those work out for you?

Jennifer