css page layout.

[adamnichols45]

I have just jumped into page layout using css rather than html tables.

Am I going backwards by placing a table inside of a div tag?

[alt131]

Depends ;)
Good on you for making the change! Your question raises two issues for me:

• Tables are the appropriate container for tabular data, so you are still "going forwards" if you are using a table for that sort of information. If the information does not lend itself to being arranged in a table you may have swayed backwards into using tables for layout.
  
• Often coders making the change will develop "div-itis" at first - using lots and lots of divs instead of applying styles directly to the html element itself. It is usually possible to achieve what is desired without using an enclosing div, so I'd take a close look at your code and ask if the div has any real purpose.

All good in theory though - feel free to post some example code if it doesn't help.

[adamnichols45]

yes I guess that table should'nt be there naughty me!

I am putting a lot of divs inside divs at the moment.

for example im going for fixed width and there is a main body with shadows left and right of that.

<div id="left"></div>
<div id="mid"> I will be placing all other div tags in here</div>

does that look about right as a starting point?
<div id="right"></div>

[Major_Payne]

The original use of table tags was for tabular data layouts. People found out they could do web pages with them and the madness began. If a table inside a div is NOT for tabular data, then leave it out.

Tableless Web Design: [en.wikipedia.org...]
Why tables for layout is stupid: [hotdesign.com...]
How to convert manually your HTML tables to CSS: [table2css.com...]
Images, Tables, and Mysterious Gaps: [developer.mozilla.org...]

[rocknbil]

<div id="left"></div>
<div id="mid"> I will be placing all other div tags in here</div>

IMO, use your divs for generic containers, but before typing "<div...." yet again, think: is there a semantic element for this content?

<div id="left"></div>
<div id="mid">
<h1>The main page title</h1>

<p style="float: right; width: 150px; background: #e6e6e6; border: 1px solid #000;">I'm a sidebar or inset box that hangs to the right of this column, but I don't need to be a div. Of course you would put the styles in an external style sheet. As a <p>, the natural padding reduces the need for extra markup.</p>

<p>This is a paragraph that would flow around the floated one. </p>

<ul>
<li>This is a list</li>
<li>This is a list</li>
<li>This is a list</li>
</ul>

</div> <!-- end mid -->

You can style any element to emulate another, for example, lists don't have to be indented with bullets, but they can still be lists. If you don't like the spacing around paragraphs, style it. I'm working on a project now with horrors like this:

<div> 
 <div> 
 <div> 
 <div> 
 Some content that should be a paragraph <br><br> 
 </div> 
 </div> 
 </div> 
</div> 

In truth that it a dumbed down version, it's actually far worse, nested divs up to 20 levels deep . . . there is a point at which divitis is not curable, it's terminal. :-)

Same is true of span:

<span style="font-weight:bold; color:#ff0000;">Why not just use <strong> or <b> and add a strong/b class to the style sheet?</span>

I'm not a fan of "zero out everything"

* { margin:0; padding:0; }

but would rather go with the natural flow of document rendering and only apply styles as you need it. Comparing the two methods, it seems like the CSS gets far more complex when everything is zero'ed out.