动态CSS布局帮助

我正在尝试做一个单一的CSS布局应该是非常有弹性的。我的意思是我有一个3列的布局,页眉和页脚都在一个容器中,并居中。我选择在容器中制作,因为我想使它适合图形。因此容器允许我很快改变分辨率。

在容器中,我使用float创建了一个3列布局,因为我希望在您降低分辨率或浏览器窗口(在该窗口中,中心和右侧div将重新排序到左侧)时产生这种效果。这样的话,网页将非常有弹性,浏览器,分辨率,甚至移动设备友好。

我做了我认为是完美的布局,但有一个主要问题我不知道如何解决。

所以我有一个左栏(菜单)浮动与宽度设置(为未来的css按钮具有相同的大小)。然后我有了主内容div,它也在左边浮动,设置了max width,使浏览器在菜单旁边浮动。如果没有宽度设置,它会在菜单div下浮动。最后,我还有一个右边的列div,宽度设置,并浮动到左边。当我在content div中有足够的文本时,这个布局是完美的。

但是,当文本不够宽时,内容div变小,基本上会破坏布局,因为所有内容都会向左移动,并在容器的右侧留下大量空间。

我希望有一些技巧可以让它变宽而不需要设置为固定宽度,因为这样它就失去了弹性效果,因为一旦浏览器到达content div,就会出现一个水平滚动条,我不希望这么快发生这种情况。

我试着把它设置成百分比宽度,但那看起来很奇怪。

我的布局是托管的 here, on my school webserver

如果有什么css的方法,请告诉我。谢谢。