Centered div shadow, possible in tables! what about div+css?

Is it possible to create a drop shadow of some centered content with div+cs

[ColoDedi]

Good Evening All,

I am a fairly experience web developer but i have come accross a bit of an obstacle when trying to migrate an existing table site i have designed to a div / css based site.

Basically the site is a 900px wide table that is centered in the middle of the page with the body padding and margin set to 0 to give a myspace type layout where the header is at the top of the browser and the footer at the bottom with no padding or margin above or below.

To add a nice finsh to the site i wanted to add a drop shadow to this centered content to give a nice smooth transition to the body background color.

I have achived this using tables and having three <td> tags inside one table with the 1st and the 3rd one having a background image with a set width repeated to the bottom of the page (i forgot to mention this is 100% height page)

I have done alot of reading on the subject of div vs tables and have come to the conclusion i would like to use div's rather than tables.
I have included a link to a screen shot of the site showing what i would like this to look like and highlighted the area in question in red.

I would be extremley grateful if someone can assist me here.

<snip>

Kind Regards Greg Langford

[edited by: engine at 10:34 am (utc) on Sep. 19, 2008]
[edit reason] No links, please post code. See Forum Charter [/edit]

[swa66]

Until CSS3 gets widely supported and adopted and browsers evolve to support real shadows ( e.g.: [w3.org...] ),

we will be stuck using a wrapper that's given the appropriate width and auto margins to center it and then inside that wrapper apply a background with the gradients applied to them on the edges. Use some padding to prevent the content to go over the gradient area.

Tip: take care not to fall from the abuse of tables into the abuse of divs. In the beginning, it's easy to forget you can layout any element, not just a div.

[ColoDedi]

Do you mean say have an image as wide as the wrapper its self 800px and then do a backgound image that is repeated down the page? and have the padding inside there to stop the page going over the edges?

Is it bad pratice to use tables to layout a page?

Kind Regards

[swa66]

Do you mean say have an image as wide as the wrapper its self 800px and then do a backgound image that is repeated down the page? and have the padding inside there to stop the page going over the edges?

I thinks that's indeed what I was saying.

Is it bad pratice to use tables to layout a page?

Opinions will differ.

In my mind there's no question that

• html tables are appropriate to contain tabular data.
  If I were to write it down on a whiteboard to explain something to somebody and I'd draw a primitive table: such data should definitely go into a html table. No doubt in my mind.
  
• nested tables with borders in different colors and backgrounds used to do layout is plainly evil: It's not just next to impossible to maintain in the long run (I tried). It's a big mess if you need to find something in the table. It's also very likely you need to change a lot of the html if you need to make even a small layout change. Screen readers might also have trouble with it.
  
• There is an area I'll gladly allow for CSS tables to occupy (this isn't <table> in html, quite different). They might solve a lot of the current overkill with divs and floats we see today were it not for ... well .. poor browser support. So it's something for the future.
  
• That leaves a table used to do some positioning and using CSS to style it: I don't think it's evil like the nested tables, but I'm not doing it for a simple reason: keep layout out of the html. I can now change layout of a site by changing the CSS only. Not by toughing all the html files individually and switching them over. I like that ability a lot. Change from a 2-col layout with the menu on the left to a top menu : one file changes, all the rest stays. Such power is worth a bit more upfront investment in avoiding IE quirks.

So in short my advice is: For something new don't use tables unless it's tabular data. For something old: don't go overboard getting the last table out of it, but if you have to tough it and are struggling with nested tables: it's high time for them to go.