中心固定宽度div位于两个相同宽度的div之间，延伸到屏幕边缘

Question

我需要彼此靠近3 <div>。中间的，固定宽度为1048px，需要完美居中，并延伸到底部。我也有一个标题。

我还需要在每一侧放置2 <div>，以便伸展到底部，因为我需要在那里有一些内容，但是他们需要根据屏幕尺寸调整它们的大小。所以每个的宽度需要（屏幕宽度 - 1048px）/ 2.

我在这里放了一个JSFiddle示例（此处的宽度为600px，只是为了在小JSFiddle窗口中显示效果）。

http://jsfiddle.net/mY2bw/

正如您所看到的那样，左侧和右侧并未显示在每一侧并占据整个宽度。

在CSS中有没有一种干净的方法来实现这一目标？

更新

重要的是，<div>}和<div>一侧伸展到底部，因为我需要为它们添加一些背景图像。

我还需要在底部放置一个粘性页脚，因此建议的任何解决方案都需要与之兼容。

Answer 1

的 Demo

HTML

<div id="wrapper">
    <div id="header">
         <h1>Fixed Width Center Column - Fluid sides</h1>   
    </div>
    <div id="innerwrap">
        <div id="left">
            <div id="inner-left">
                <p>Left fluid column content.</p>
            </div>
        </div>
        <div id="center">
            <p>This layout is constructed using 2 floats of (100% - 1024px)/2 each.</div>
        <div id="right">
            <div id="inner-right">
                <p>Right fluid column content.</p>
            </div>
        </div>
    </div>
    <!--end innerwrap-->
    <div id="center-faux"></div>
</div>
<!--end wrapper-->
<div id="footer">
     <h3>Footer</h3>
</div>

CSS

* {
    margin:0;
    padding:0
}
body:before {
    /*Opera Fix*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-bottom:-100px;
    /*header height*/
}
html, body {
    height:100%;
    background:#BBB;
}
#wrapper {
    min-height:100%;
    margin-top:-50px;
    /*footer soak up*/
    position:relative;
    /*set as containing block for AP faux column*/
}
#innerwrap {
    /*IE6 needs this for the AP faux column*/
    width:100%;
    overflow:hidden;
}
#header {
    border-top:50px solid #333;
    /*footer soak up*/
    height:100px;
    position:relative;
    z-index:2;
    /*layer it above the AP faux*/
    background:#333;
    color:#FFF;
    text-align:center;
    min-width: 1024px;
}
#left {
    width:50%;
    float:left;
    margin-right:-512px;
    /*background:#fff; for visual testing*/
}
#inner-left {
    margin-right:512px;
    background:#BBB;
    /*same as body BG*/
}
#center {
    width:1024px;
    float:left;
    background:#FFF;
    position:relative;
    z-index:3;
}
#right {
    width:50%;
    float:right;
    margin-left:-512px;
}
#inner-right {
    margin-left:512px;
    background:#BBB;
    /*same as body BG*/
}
#center-faux {
    position: absolute;
    width: 1024px;
    bottom: 0;
    height: 100%;
    margin: auto;
    left: 0;
    right: 0;
    background: #FFF;
    z-index: 0;
}
* html #center-faux {
    height:999em
}
/*for IE6*/
 #footer {
    clear:both;
    width:100%;
    height:50px;
    background:#333;
    color:#FFF;
    text-align:center;
    min-width: 1024px;
}
P {
    padding:10px 10px 0 10px;
}