How to create a 100% fixed footer with a fixed width center transparent gap?

Question

How to create a 100% fixed footer with a fixed width center transparent gap? No scripts!

EXPAND THIS WAY <<< ______ FIXED WIDTH GAP ______ >>> EXPAND THIS WAY

MY OWN SOLUTION

HTML

<div id="Ftr">
  <div id="FtrL"></div>
  <div id="FtrM"></div>
  <div id="FtrR"></div>
</div>

CSS

#Ftr {
    position: fixed;
    height: 115px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 21;
}
#FtrL,
#FtrR {
    position: absolute;
    bottom: 0;
    height: 100%;
    width: calc(50% - 360px);
    width: -webkit-calc(50% - 360px);
}
#FtrL {
    background: url('../Images/Layout/footer_left.png') repeat-x;
    left: 0;
}
#FtrR {
    background: url('../Images/Layout/footer_left.png') repeat-x;
    right: 0;
}
#FtrM {
    background: url('../Images/Layout/footer_middle.png') no-repeat;
    height: 115px;
    width: 720px;
    margin: 0 auto;
}

See the live data here: http://www.dreamtek.info

Answer 1

Using only CSS with CSS3 calc function help:

You can define side DIV elements width using the following CSS property:

width: calc((100% - 200px) / 2); /* browsers with native support */
width: -webkit-calc((100% - 200px) / 2); /* webkit browsers support, Chrome, Safari... */
width: -moz-calc((100% - 200px) / 2); /* Firefox support */

where 200px is the center DIV fixed width. This way the remaining horizontal space will be filled equally by both side DIV elements. Be aware that this is not a cross browser compatible solution. You might need to use javascript if you want one (if so see my other answer)

DEMO

+1 for the author of the question for reminding me of webkit-calc