Dynamic CSS layout help

I am trying to make a single CSS layout which should be very elastic. By that I mean I have a 3 column layout with header and footer all in a container and centered. I chose to make it in a container because I wanted to make it suitable for graphics. Therefore the container allows me to change the resolution very quickly.

In the container, I made a 3 column layout using float, becouse I want that effect when you decrease resolution, or browser window, where the center and right div reorder to the left side. This way the page would be very elastic and browser, resolution, and even mobile device friendly.

I made what I believed was the perfect layout, but there is one major problem I don´t know how to solve.

So I have a left column (menu) floated left with width set (for future css buttons to have the s开发者_JS百科ame size). Then I have the main content div, floated also left, with max-width set to make the browser to float it next to the menu. Without width set it gets floated under the menu div. And finally I have the right column div also with width set and floated to left. When I have enough text in the content div, this layout is perfect.

But when the text is not wide enough the content div gets smaller, and basically ruins the layout becouse everything shifts to the left and leaves lots of space to the container's right side.

I was hoping maybe there is some trick to make it wider without needing to set it to fixed width because then it loses the elastic effect because as soon as browser reaches the content div a horizontal scrollbar appears and I don't want this to happen so soon.

I tried set it to percentage width but that looks strange.

My layout is hosted here, on my school webserver, and it's a slightly older version with right div floated right, but otherwise it as I described.

Please, if there is some css way, tell me. Thanks.

Why does the center content need to be floated? If you floated the left div left, the right div right then include the center content, it should flow down the middle of them. You might want to put the whole thing in a container div to limit the maximum width.

Use percentages

#left_menu{ width:15%; }
#content{ width:72.5%; }
#right_menu{ width:12.5%; }

Update

If you want left and right to be fixed and only the center to be floated then put the left and right divs inside the center. Position relative the center one, and absolute the left and right.

example at http://www.jsfiddle.net/gaby/mBuf9/