CSS align three divs horizontally

I'm having an issue aligning three divs inside a parent div, the effect I need is the following

|IMAGE| +TEXT+ |IMAGE|

Each div contains an Image (2) and the text (1) respectively. Aligning them is easy, the problem is that I want the CENTER div to auto width to the size of the browsers' window and keep the other IMAGE divs always on the right and left side respectively.

Something like this for example, if the user maximizes the window:

|IMAGE| +++++++++++++++++++TEXT++++++++++++++++++++++++ |IMAGE|

As you can see, the idea is that the center div grows, and auto width but keeping the structure.

How could I get that behaviour? Thanks in advance.

#container { text-align: center; }
#div-1 { float: left; }
#div-2 { display: inline; }
#div-3 { float: right; }

If that still doesn't behave how you want, please give more detailed requirements.

Here is another inline implementation for three images side by side:

<div style="text-align:center">

    <div style="float: left"><img src="image1.png"/></div>

    <div style="display: inline"><img src="image2.png"/></div>

    <div style="float: right"><img src="image3.png"/></div>

</div>