I'm having a hard time finding the right configuration for my css layout. Maybe I'm trying too many things at once.
What I want is to have a center column be 988px wide, and the left and right columns to evenly take up the rest of the browsers width. In addition, I want a footer to remain on the bottom even if there is no content in the center div. I can accomplish this part fine - so far.
The right and left divs will contain a background image and repeat-x - BUT, the issue is I'm trying to create the illusion the background image (for all 3 divs) is a solid image spanning the whole width of the browser - http://www.daniweb.com/forums/thread345979.html is the link to my original post on this topic, but the replies don't quite get me there.
If you notice from the above link - for the left div - its background image (right edge) must align with the left edge of the center div -- for the right div - its background image (left edge) must align with the right edge of the center div (confusing if you don't look at the graphic examples I made from the above link).
The whole reason I'm having to do this crazy mess is because I have some nav buttons in which I want a glow effect (done in photoshop using a layer blend) to happen on rollover, and the only way I know how to accomplish that is to include part of the background in each button state - I can't just make a transparent button because the glow is based upon its background.
From all the experimenting I've done, I have messed with the (min-height:100%; height:auto !important; height:100%) combination, but I can't figure out which div(s) need this. The left and right divs only contain a background image. I want their height to expand the same as the center div (according to how much content I stick into the center div).
Lastly, I want a footer (width:100%; height:150px) to stick on the bottom. I've read at least 30 web pages about sticky footers and similar to what I'm trying to accomplish, but I haven't found anything specific to what I want (it can't be that uncommon). I'm pretty sure it's all just a matter of having the right combination of css properties under the proper divs, but I just can't figure it out.
If it weren't for the left and right divs needing to be the way I described above, I've figured everything else out - the ultimate goal is to incorporate the left and right div with their background images.
If anyone can shed some light, I would buy you a cookie or two... thanks..