Advanced CSS - 3 Column Middle Fixed and Transparent

How would I go about getting the yellow and red from not appearing behind the transparent gray div? Go to three divs to see the example.

Good luck!

Move the color to an inner div with a margin to avoid the center portion and float both left and right with appropriate negative margins.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>three divs</title>
<style type="text/css">
body {
    margin: 0px;
    padding: 0px;
}
</style>
</head>
<body>
<div style="width:50%;float:left;margin-right:-490px;">
    <div style="margin-right:490px;background-color:yellow;height:300px;">&nbsp;</div>
</div>
<div style="height:300px;width:980px;float:left;background-color:gray;position:relative;z-index:10;opacity: 0.5;">fixed middle</div>
<div style="width:50%;margin-left:-490px;float:right;">
    <div style="margin-left:490px;background-color:red;height:300px;">&nbsp;</div>
</div>
</body>
</html>


Or perhaps something a little neater like this:


<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin:0;
    padding:0
}
p {
    margin:0;
    padding:5px 5px 10px
}
.wrap {
    width:100%;
    overflow:hidden;
    min-width:980px;
}
.left {
    width:50%;
    float:left;
    margin-left:-490px;    
    background:yellow;
}
.right {
    float:right;
    width:50%;
    margin-right:-490px;
    background:red;
}
.middle {
    width:980px;
    float:left;
    background:#ccc;
    position:relative;
    z-index:10;
    opacity: 0.5;
    margin-right:-2px;/* ie6 fix*/
}
.left,.right,.middle{min-height:300px;}
* html .left,* html .right,* html .middle{height:300px}
</style>
</head>
<body>
<div class="wrap">
    <div class="left">&nbsp;</div>
    <div class="middle">
        <p>This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    : This is some text    :</p>
    </div>
    <div class="right">&nbsp;</div>
</div>
</body>
</html>


Duh and THANKS!!! Super easy fix.

Boy Scouts honor I will make it neater!

Thanks again!