How to.. the middle div of three ever on center and if the navigator are resized
===

Sorry about my english.

Please, i have a problem with divs, i have 3 divs "with image" horizontally, the images have to be together.

Here is the default view, if the screen is large enough.
![Start][1]

If the navigator are resized i lost center with the #div2. The #div1 are aligned to the left, that is not i need.
![Problem][2]

What i need is the #div2 stay on center, but i don't know to do that. #div1 and #div3 are outside of the navigator, no one div can be resized, are a fixed size.
![What i want][3]

  [1]: http://i.stack.imgur.com/M0ZzK.png
  [2]: http://i.stack.imgur.com/ZIhqV.png
  [3]: http://i.stack.imgur.com/meqyG.png

The html code:

    <body id="body">
    	<div id="wrap">
    		<div id="baseLeftBg">
    		</div>
    		<div id="baseContent">
    		</div>
    		<div id="baseRightBg">
    		</div>
    	</div>
    </body>

The CSS code:

    #body {
    	text-align: center;
    	height: 100%;
    	margin: 0 auto;
    	padding: 0px;
    	background: #ffffff;
    	-moz-background-size: cover;
    	background-size: cover;
    	float: inherit;
    }
    
    #wrap { 
    	width: 1484px;
    	margin: 0 auto;
    	text-align:left;
    }
    
    #baseLeftBg {
    	margin-top: 60px;
    	background: #CDCDCD;
    	width: 286px;
    	height: 776px;
    	float: left;
    }
    
    #baseContent {
    	margin-top: 60px;
    	background: #A7A7A7;
    	width: 911px;
    	height: 776px;
    	float: left;
    }
    
    #baseRightBg {
    	margin-top: 60px;
    	background: #CDCDCD;
    	width: 286px;
    	height: 776px;
    	float: left;
    }

How i can do that?

Thanks!!