You'll need to float the .inset box, but it will still be too wide. You have 380px width to work with, because that's the width of the container. The inset boxes are 181px each. That makes 362px wide. BUT ... each inset box has 7px left margin, and also six pixels left and right. Padding and margin add to the total width, so the full width of your two inset divs is

181 + 181 + 7 + 7 + 6 + 6 + 6 + 6 = 400px.

So you'll need to reduce the width of the inset box by altering those dimensions.

Is it obvious why my footer seems to be in the content flow of col1? In my html it is clearly out of that div.

Because col2 is positioned absolutely, no other elements will see it. That's why position: absolute should not be used for page layout. It is a mess to work with. It would be better to have a wrapping div for your two columns and float the column divs inside that. Give the wrapper overflow: hidden, and everything will work nicely.

Ok, are you saying create a "big box" with and put the two columns in it, floated let and right?

Yes, that's the most common way to do it.

What does the overflow:hidden achieve?

If you have a box with only floated contents, the content (in this case, the floated columns) will hang out of the box. That wouldn't cause you too much troble, but you might have a little trouble getting the top spacing of the footer just right. The easiest way to make the box wrap around the columns is to apply overflow: hidden to it. (It would be a bigger issue if your box had a background color, for example. Without something like overflow: hidden, the background color wouldn't appear, because the box would have zero height.)

Great! I'm glad that made sense. Your layout is much better now. Because you have overflow: hidden on the content wrapper, you don't need clear: both on the footer, but it would be worth enabling and disabling those values to compare results so you can see what effect overflow: hidden has. (You can easily turn these on/off with something like Firebug for Firefox or the native dev tools in browsers like Chrome of Safari. Just click right click on an element and choose Inspect Element to play around with this. It's quite fun.)

Is there a minimally invasive method of creating a submenu off of my "products menu item" that matches it graphically? Or is the way my menu is setup not going to lend itself to such an addition?

It's quite feasible. Drop menus are common. Mind you, my preference would be not to have a drop menu, but to have options to click when a visitor is in the Products section. But I just don't like dropdowns, so I'm biased.