CSS v Tables....are you sure?

I'm a new convert to laying out sites using css instead of tables and I can see the reasons for doing so.
I am trying to use css in most of my new projects but one problem I have, and to me it is an insurmountable one, is that I can't design tight graphic layouts with css like I can with tables.

For instance, with tables I can make curvy lines go from a side bar, up through some menu bars and into a logo at the top of the page.
I can't see how I can do this using css layout: (Look at the line on the left that runs up the page)
example here

Also, I thought about converting one of my sites to css layout, but I just don't think it's possible.
Here is the url.example 2

Please don't get me wrong here, I am all for css but from what I can make out there's things that can't be done with it.

There are many knowledgable folks out there and I stress that I am extremely grateful for all the advice I receive on these forums, however, so many folks are saying css layout is the only way to go and are intimating that if we use tables we are dumbo's.

I would like someone to really honestly tell me if my above sites can or can't be built using css, without going into 'support mode' for style sheet layout.
Thanks guys.
Brian

To get a good idea of what can be achieved using css have a look at the CSS Zen Garden

It makes CSS converts out of many

Thank you very much for this.
It's basically answered my question.
Now getting my head around it is the next step.

I've been looking at this but there's one thing I really can't grasp..........Howto center everything on the page.

I can get an idea of what's basically going on and I seem to be able to figure the positioning of most objects but I simply can't see how the whole lot is centered.

The main 'table' (for want of a better word, sorry stays in the middle of the window regardless of what resolution your screen is.

the "vertical-align" property is only for inline elements positioned inside their parent line. There is a hack that uses this approach, but it only works when the container has a fixed height.

Consider a box that's 500px high:



Would be achieved using:



There's also some tricks with absolute positioning as well, but that only works when the content has fixed height.

So basically:

Use the "line-height" method when the parent has fixed height but not the content.

Use the "negative-margin" method when the parent has varying height but the content has a fixed height.

If both are varying, then you're screwed

Well, not entirely.

In standards-compliant browsers, there's: "display: table-cell;" which makes everything work perfectly, but IE ignores it, so unless you're developing for an intranet using standards-compliant browsers then you're without hope really.

Phoenix, thanks very much for this. I really do appreciate it.

Also if you are talking about centering everything horizontally you can set the text-align attribute on the body and use a fixed width container for your content



And the CSS

When using text-align, the centered content doesn't need a fixed width, but if you want the stuff inside it to be centered then just override it for the child:

DANGNABBIT! I'm still using too much code. That's what I get for listening to people !(on this forum)

OOPs, sorry, 'fraid that didn't work for me when I viewed it in me browser. (ie6) Everything stays to the left of the page

elijahthegold's code worked ok though.
(Centered container with text left-aligned)

Oh wait... yeah, I just realised, since the #container element is a block element (that is, it "sort of" fills the line) the content will appear as if its left aligned.

So yeah, #container will need some form of width (but it can be anything)

Although my preferred choice for horizontal alignment of "page containers" is with this:

body { marign: 0 10% 0 10%; }

Which means it looks good at practically all screen-sizes, but it means that the content has a varying width.