You're right, in that <div>s are used [sometimes] for positioning...but really, only when it is appropriate.
<h1>, <p>, <dl>, <ul>, <address> and a whole host of other tags are also used.
The idea is you mark up your document according to *what it means*, first. Then, and only then, do you go about figuring out *how it looks*, and on what platforms and clients.
The truth is, your document is going to look differently depending upon the client (or, at least it should!) You probably do not want your documents to look the same on a PC as it does on a handheld. Nor would you like it to look the same on a printed page as it does on a cell phone.
Different platforms, different viewing environments = different views! Same document, same mark up, different looks appropriate to the medium being used.
So, your new products page, I'd probably mark up something like this:
code:
<body>
<h1>A Million Little Things</h1>
<div id='newProducts'>
<h2>New Products</h2>
<h3>Product #1</h3>
<img src='' alt='product 1' />
<p class='description'>lksl slsld dkd gkditi eke dsid diewo wwke did ekleke deid dke di deie eie skdiw aldl.</p>
<h3>Product #1</h3>
<img src='' alt='product 1' />
<p class='description'>lksl slsld dkd gkditi eke dsid diewo wwke did ekleke deid dke di deie eie skdiw aldl.</p>
<h3>Product #1</h3>
<img src='' alt='product 1' />
<p class='description'>lksl slsld dkd gkditi eke dsid diewo wwke did ekleke deid dke di deie eie skdiw aldl.</p>
<h3>Product #1</h3>
<img src='' alt='product 1' />
<p class='description'>lksl slsld dkd gkditi eke dsid diewo wwke did ekleke deid dke di deie eie skdiw aldl.</p>
</div>
<ul id='categories'>
<li><a href=''>7 Gypsies</a></li>
<li><a href=''>Autumn Leaves</a></li>
<li><a href=''>Bazzill Basics</a></li>
<li><a href=''>Chatterbox</a></li>
<li><a href=''>Creative Imaginations</a></li>
</ul>
<ul id='mainNav'>
<li><a href=''>Home</a></li>
<li><a href=''>Shopping</a></li>
<li><a href=''>What's New</a></li>
<li><a href=''>Coming Soon</a></li>
<li><a href=''>Idea Gallery</a></li>
<li><a href=''>Design Team</a></li>
<li><a href=''>About Us</a></li>
<li><a href=''>Contact Us</a></li>
</ul>
<ul id='breadcrumbNav'>
<li><a href=''>Top</a>
<ul>
<li><a href=''>Catalog</a>
<ul>
<li><a href=''>New Products</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul id='auxNav'>
<li><a href=''>My Account</a></li>
<li><a href=''>Cart Contents</a></li>
<li><a href=''>Checkout</a></li>
</ul>
<form>
<fieldset>
<legend>Search</legend>
<label for='search'>Use keywords to find the product you are looking for.</label>
<input type='text' id='search' name='search' />
<button type='submit' name='searchSubmit'><img src='searchIcon.png' alt='search' /></button>
</fieldset>
</form>
<ul id='information'>
<li><a href=''>Shipping & Returns</a></li>
<li><a href=''>Privacy Notice</a></li>
<li><a href=''>Conditions of Use</a></li>
<li><a href=''>Contact Us</a></li>
</ul>
<p id='copyright'>Copyright © 2004. A Million Little Things. All rights reserved. Site by Silver Gear.</p>
</body>
Now, I did that very quickly. It's likely I left something out.
Furthermore, a lot of my decisions were semantic in nature and could be argued about till the end of time by all sorts of well-meaning and intelligent people.
For instance, should you products be listed as I have them, or as part of a <dl>?
Should all your nav be contained within one <div id='navigation'>?
Should your nav lists have <h*> before them?
In what order should your elements go in the document?
Make your own decisions on those things. That's not really the point.
Once you have your document marked-up, then you can work on styling it.
With your design, styling it "cross-browser" shouldn't be too difficult at all.
If you're interested, mark up some of your pages sematically, then come back here and ask about style and positioning. There are tons of people (I'm certainly one) who would be happy to help.
posted 07-20-2004 00:05
. I don't know why, but I cannot seem to figure this out. If you go to 
. it might be some combo of these things.
. Ick. Go CSSP!