CSS rules for table-less layout

Hello,

This may seem like a general question, but I’m wondering if anyone has a link to a tutorial on table-less layout from start to finish?

I’ve been able to collect tons of information regarding proper CSS markup, but its all very fragmented and hard to make sense of- there never seems to be a complete explanation of proper rules and CSS inheritance.

For example…which <div> tag do you apply padding or margins to…which <div> gets text attributes, background attributes etc. Do any of you have tips and tricks for a system of labeling?

for example, assume that container is for all content, welcome is a header, and products is a group of products:


<div id="content">
   <div id="welcome">
        <div id="products">
        </div>
   </div>
</div>

can someone explain how they would apply their styles and layout? Positioning?

I’ve been trying to glean info from sites but this is pretty much impossible due to external style sheets.

I do know how to make a CSS hybrid site work (still using some tables), but fear I may be doing it with too much effort and redundant and/or unnecessary markup. It’s especially hard because, for example, some people tell me not to apply styles to <td> tags while others say go for it. It seems so arbitrary…so how do I get myself inline with standards???

Thanks so much,