Question

I have a issue with my menu:
I have a div with 960px, which have a background (image 2). In the left of image 2, need another element with fitt left space, and right, a div which need to fitt right space.

So, if I have a resolution of 1024px, left need to have 32px, center (ever) 960px and right 32px. If have a resolution of 2048px, left: 544px, center: 960px, right: 544px.

<div id="container-menu">
    <div id="left-bg">// EMPTY, ONLY NEED TO FIT THE WINDOW LEFT //</div>
    <div id="center-bg">// HERE GO MENU AND LOGO //</div>
    <div id="right-bg">// EMPTY, ONLY NEED TO FIT THE WINDOW RIGHT//</div>
</div>

See image:

UPDATE:

Image 1 and Image 3 have 1px of width and repeat-x added to background

Image 2 have 960px of width

All images are transparent png.

Thanks!

Answer 1

You can use CSS3 Flex property for this.

For Example:

HTML

<div class="parent">
 <div class="left">1</div>
 <div class="middle">2</div>
 <div class="right">3</div>
</div>​

CSS

.parent {
    display: -moz-box;
    -moz-box-orient: horizontal;
    display:-webkit-box;
    -webkit-box-orient: horizontal;
    width: 100%;
}

.parent div{
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    height:40px;
}
.parent .middle{
    width:460px;
    background:yellow;
}
.left{background:red;}
.right{background:blue;}

Check this http://jsfiddle.net/pMh97/1/