HTML5 CSS3 Footer bar

Question

How do I do this in widths? The gray middle div is 100% - 50px - 50px. Please show code; below this image is my guess

EXAMPLE : (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

I have two examples. The first uses a fixed height for the footer as a whole, and floats for the sides. The second uses a variable height footer (based on the "middle" div's content), using a trick that sets the background of the footer to black and the middle part to grey and margins to reveal the background for the rest of the area that the variable-height sides do not extend to (there would be grey underneath the text if not for the margins).

<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;
}

Answer 2

What about setting margin on inner div?

Just showing style tags for convenience, move to css file.

<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>