The wrapper is a simple device developers learned to implement to simplify alignment and layout issues after discovering (the hard way) that it works differently than tables and cells.
Just like a good artist learns when to use the best brush, how to mix colors without waste and minimize a mess - it's the same with div layouts, you pick it up and after awhile and start doing. As we discuss often here on MacRumors, the learning curve is small, the effort worthwhile because the site is easily scalable due to separation and content from style, and in the end it means alot less coding and work.
Nothing wrong at all using Adobe to slice up images and export a div, but the wrapper part - that you're learning from your peers, and of course to benefit from it you will need to do a little coding by hand. Adding in that div manually in the HTML source, of course. For the record I was not talking about adding wrappers around an image simply because it is sliced, my wrapper div comment was about the master div for total page layout.
I tried your link above, it is a password protected page.
Here is a classic situation where a wrapper div helps with aligning text on the bottom of a div (same as <td valign="bottom"> in tabular layout) - try it in your browser:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example</title>
<style>
div {margin: 2px}
div#content {width: 100px; height: 100px; vertical-align: bottom; border: 1px solid red}
div#content2_wrapper {position: relative; width: 100px; height: 100px; border: 1px solid green;}
div#content2 {position: absolute; bottom: 0;}
</style>
</head>
Behold, two 100x100 boxes each with some text, the first is a BAD use of div/css to bottom align some text, the second works:
<div id='content'>This text is supposed to be aligned on the bottom! Is it?</div>
<div id='content2_wrapper'>
<div id='content2'>Look! This actually is on the bottom!</div>
</div>
<body>
</body>
</html>
Notes: I added a 2px margin for all div's to make the display more readable. Of course there are other ways to do this, and everyone has their own way of creating the CSS, but as you can see in the code for the green box, a wrapper div with relative positioning then a child div with absolute positioning along with bottom set to 0 means perfect bottom alignment. The red box seems like it should work - i.e. vertical-align: bottom - but alas that command is for something else. Just one of the tricks you learn.
-jim
