The css file I used for this is :* {
margin: 0;
padding: 0;
}
body {
background-color: #FDFDFD;
color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
p {
margin-bottom: 1em;
}
#wrapper {
width: 900px;
margin: 30px auto 0;
}
#navtop {
height: 25px;
background-color: #344233;
text-align: center;
position: relative;
}
#navtop li {
list-style: none;
display: inline;
}
#navtop .last {
color: #FFFFFF;
padding-left: 10px;
}
#navtop a {
color: #FFFFFF;
text-decoration: none;
line-height: 25px;
padding: 0 15px;
}
#navtop a:hover {
font-weight: bold;
}
#content {
position: relative;
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
background-color: #A49C9A;
}
* html #content {
height: 300px;
overflow: visible;
}
#leftmask {
position: absolute;
width: 240px;
height: 100%;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
background-color: #FFFFFF;
left: 0px;
top: 0px;
}
#rightmask {
position: absolute;
width: 240px;
height: 100%;
background-color: #FFFFFF;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
right: 0px;
top: 0px;
}
* html #rightmask, * html #leftmask {
height: expression(document.all['content'].clientHeight);
}
#rightcol {
float: right;
width: 210px;
position: relative;
margin-right: 15px;
display: inline;
padding: 10px 0;
}
#rightcol h2 {
font-size: 130%;
text-align: center;
margin-bottom: 5px;
}
#rightpanel {
min-height: 350px;
}
#rightpanel, #rightcol h2, #leftpanel {
background-color: #FFFFFF;
color: #000000;
padding: 6px;
border: 1px solid #666666;
filter: alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity:0.6;
opacity:0.6;
min-height: 10px;
}
* html #rightcol h2, * html #leftpanel {
height: 1%;
}
* html #rightpanel {
height: 350px;
}
#leftcol {
float: left;
width: 210px;
position: relative;
margin-left: 15px;
display: inline;
padding: 10px 0;
}
#navleft {
margin: 20px 0;
}
#navleft li {
list-style: none;
margin-bottom: 5px;
}
#navleft a {
display: block;
height: 33px;
line-height: 33px;
text-align: center;
text-decoration: none;
color: #000000;
border: 1px solid #666666;
background-color: #FFFFFF;
filter: alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity:0.6;
opacity:0.6;
}
#navleft a:hover {
filter: alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
}
#subfoot {
background-color: #344233;
color: #FFFFFF;
height: 25px;
line-height: 25px;
padding-left: 14px;
font-weight: bold;
}
#footer {
margin-top: 40px;
text-align: center;
}
The css is fairly self-explanatory and similar to yours down the the #content div, apart from the top navigation <ul> being styled directly instead of being contained in a div.
The #content div gets the background image centred vertically, and an appropriate background colour assigned in case the div expands past the height of the image. It also gets a relative position to provide the reference for the absolutely positioned translucent panels, and overflow set to force it to surround the internal floats. As IE6 does not understand the overflow method, it is fed an arbitrary height to trigger HasLayout, and the overflow reset - this height setting (which IE6 treats like min-height) is also required to make the height expression work for setting the translucent panels height in IE6 - mentioned shortly).
The two mask divs are sized and absolutely positioned to the left and right of the content div, and given the required transparency. The 100% height will work in modern browsers (even IE7), but not for IE6, so an expression is used to calculate the height and fed to IE6 via another star-html hack. This expression will only work if the parent div it refers to has a height set, even if this is expanded by content, hence the height referred to earlier.
The #rightcol and #leftcol divs are floated right and left, and given the width and appropriate side margin to centre them in the translucent panels. The relative position is to ensure they overlay on top of the translucent panels, and the inline display quashes IE6's doubled float margin bug.
The #rightpanel, h2 and #leftpanel are given their transparency, and a min-height to trigger HasLayout in IE7. The #rightpanel is given a 350px min-height, and it is this that sets the overall minimum height of the site if there is little content. All three of these elements are given a height to IE6 through more star-html hacks to trigger HasLayout.
The left navigation has the <a> elements sized, coloured, and transparency applied, with spacing between them done with a bottom margin on the <li>s. I also included a non-translucent rollover style for these.
See if this is close to what you were doing. This can also all be directly applied to the upholstery site you are doing.