CSS Gurus
 

I've been having a hard time wrapping my brain around something that I've been doing in tables for years. Basically I want to have 3 columns of stuff but I want the center column to appear first in the html code and I want to use CSS instead of tables.

Here's an example using tables http://sirmoby.com/first.html

I've found some complex CSS examples out there but they all change the width of the center column and I don't want that. Any CSS gurus have any good ideas?

Absolutely. http://maladaptedmedia.com/moby.html

The key is using "position:relative" so that you can place the div for the center column first while telling it to be pushed over for the left column. Then using "position:relative" to tell the left column "oh no buddy, you're going to show up over there where you belong".

I'm no guru though. Others may have some input about adding to or refining what I've done. I checked it in both Firefox and IE and it lays out the same for both.

You want to do it with or without tables? Without tables this is a good place to start http://www.positioniseverything.net/piefecta-rigid.html

I'll look through my notes and see if I can find on with tables. I think UW has the answer tho. :)

I couldn't find my css on how to do it with tables but I have some without tables that are source ordered. I'll pm you the urls. :D

Useless,
I looked at your example and you didn't clear any of your floats. I created a total disaster by not doing that on a few pages. Here's some more info on floats. http://positioniseverything.net/easyclearing.html

Is there a translation for that page anywhere? ;)
I read through it and it looks like the old fashioned method they spoke of is better than the other fixes they promote, mainly since they don't appear to be cross-browser friendly. I've never seen any mention of 'clear' before in my minor dealings with CSS, but I do tend to keep things simple. Until I screw something up, I'm going to continue to act as if it doesn't exist. :D

Thanks for the link, Maj. Stress.

don't know if either of these links will be any help here:
http://www.alvit.de/handbook/
http://css-discuss.incutio.com/?page=ThreeColumnLayouts

SirMoby, say you want three colums: 150,400, and 150, example.

Define three sets - one starts at 10 / 150 wide, one that starts at 170400 wide and one that starts and 580 and is 150 wide. Now you can put the sections in any order you want in the code, because you hard code the same starting vertical point for each one. Position absolute is the key.

That is a basic way to do it, there is more but that is a very basic way to make a page have three hard sized columns and have your middle column be first :)

Alex

Looks like -480 from http://maladaptedmedia.com/moby.html does exactly what I needed.

Thanks for all the help guys :)

I usually clear like this:

div.clear {
clear:both;
height:0px;
overflow:hidden;
}

and when you have to "clear" the floated DIVs:

That's a really good css link and example. I've got a bunch of three columns layouts and more that I've adapted over time. Why I've never figured out to wrap the three columns within a container is beyond me hence solving most of the annoying aspects of trying to get a reliable layout that works with all kinds of content and circumstances.

I've always been entranced by css and and am amazed that there really isn't anything you can't do if your good enough which I hardly am. I try to use it wherever possible on mainstream because of the "accessability issue". By some numbers, people with some kind of disability account for almost 10% of regular non-biz internet users and how uncool is it to screw them around with a bunch of tables and gobbeldygook they can't read nor their machines.