横跨页面的横条，每边有不同的颜色

Question

我需要设计如下所示的内容。

到目前为止，我已设法完成http://jsfiddle.net/GDDA5/1006/，但我无法在导航栏和图像栏的每一侧添加不同的颜色，如示例中所示。我不知道该怎么做。

对此方面的帮助表示赞赏。

示例代码

<div id="BannerBar"></div>
<div id="navBar"></div>
<div id="TopImageBar"></div>
<div id="imageBar"></div>
<div id="contentWrapper">
    <div id="logowrapper">LOGO</div>
    <div id="NavigationWrapper">Home | About Us | News | Something</div>
    <div id="TopImageWrapper">IMAGE HERE </div>
</div>
<div id="footerBar"></div>

Answer 1

将此添加到您的CSS：

#navBar:before {
    content: '';
    position: absolute;
    background: gray;
    height: 100%;
    right: 0;
    width: 50%;
}

#TopImageBar:before {
    background: gray;
    content: '';
    height: 100%;
    position: absolute;
    width: 50%;
}

Answer 2

这是经过修改的jsfiddle，双方#navbar有2个div #leftNav和#rightNav，黑色和红色背景色 JSFIDDLE

第二种方式是使用：之前：之后我不建议因为IE8有问题：在伪元素之前

编辑：

我在考虑IE7，而不是IE8，只需要声明<!DOCTYPE>。

Answer 3

完成：http://jsfiddle.net/GDDA5/1014/

您现在可以左右更新颜色。

.TopImageBar
{
    height: 80px;
    background: blue;
    margin-top:90px;
    width:50%; 
    float: left;
    position: absolute;
}

.TopImageBar.Right {
     background: red;
     right: 0%;
}