HTML5 CSS3页脚栏

Question

如何在宽度上执行此操作？灰色的中间div是100％ - 50px - 50px。请显示代码;下面这个形象是我的猜测

实例：（http://mediahood.net/mesgr.png）

<div style="position:absolute;left:0px;width:50px;height:50px;"> 
<div style="width:50;height:50px;background-color:#000;margin:0px;"> 
<img id='txtrattach' src="/assets/txtr-attach.png" height='50px'></div> 
</div> 

<div style="position:absolute;left:50px;width:258px;height:50px;font-family:'Harabara';font-size:12px;"> 
<input id="txtrinput" type="text" name='message' onKeyPress='return charLimit(this)' onKeyUp='return characterCount(this)'> 
</div> 

<div style="position:absolute;right:0px;width:50px;height:50px;"> 
<div style="width:50px;height:50px;background-color:#000;margin:0px;"> 
<span id='charCount'>150</span><span id='charCount2'> chars.</span> 
<input id='txtrsend' src="/assets/txtr-enter.png" height='50px' name="send" type="image" value="Send"> 
</div> 
</div> 

</dov> 

Answer 1

关于内格设置保证金是什么？

只是为了方便显示样式标签，移动到CSS文件。

<style> 
.outer { 
    width: 400px; 
    background-color: #ddd; 

} 

.inner { 
    margin: 0 50px; 
    background-color: #ccc; 
} 
</style> 

<div class="outer"> 
    <div class="inner"> 
     inner div 
    </div> 
</div> 

Answer 2

我有两个例子。第一个使用一个固定的高度作为一个整体，并漂浮在两侧。第二个使用可变高度页脚（基于“中间”div的内容），使用将页脚背景设置为黑色并将中间部分设置为灰色和边缘的技巧来揭示该区域其余区域的背景可变高度的边不会扩展到（如果不是边距，文本下方会出现灰色）。

<div id="footer"> 
    <div id="left">50px</div> 
    <div id="right">50px</div> 
    <div id="middle">100%</div> 
</div> 
<div>2:</div> 
<div id="footer2"> 
    <div id="left2">50px</div> 
    <div id="right2">50px</div> 
    <div id="middle2">100%<br />100%<br />100%</div> 
</div> 

CSS：

#footer { 
    height: 115px; 
    text-align: center; 
    background: #ccc; 
} 
#left { 
    float: left; 
    height: 100%; 
    background: #000; 
    color: #fff; 
    text-align: center; 
    width: 50px; 
} 
#right { 
    float: right; 
    height: 100%; 
    background: #000; 
    color: #fff; 
    text-align: center; 
    width: 50px; 
} 
#footer2 { 
    text-align: center; 
    background: #000; 
} 
#left2 { 
    height: 100%; 
    float: left; 
    color: #fff; 
    text-align: center; 
    width: 50px; 
} 
#right2 { 
    float: right; 
    color: #fff; 
    text-align: center; 
    width: 50px; 
    height: 100%; 
} 
#middle2 { 
    margin: 0 50px; 
    background: #ccc; 
}