I know I did something wrong, I just can’t figure out what.
You’ll see the two small action images, mid-page on the right. I want them side by side but can’t figure out what I’m missing.
Here’s the reference url:
http://www.xswizcorex.com/eks/
and the css is here:
http://www.xswizcorex.com/eks/css/index.css
Thanks for any guidance.
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.
Thank you, your advice actually made me realize a few other corrections I needed to make.
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?
What does the overflow:hidden achieve?
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.)
Wow, you rock, thanks again.
So simple to change and more importantly it makes sense to me.
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. 
Yeah, that was the plan I have begun working on. I’ve just never created a css based submenu before and always wanted to give it a shot. Perhaps later.
Here’s a nice model to start with, if/when you decide to try one:
Thank you for the link. I assume that could be modded to use images?
Yes, certainly.