Css 缩放页面（ctr+；ctr-），折叠模板

我有固定宽度的三列页面布局。 请参阅下面的HTML和CSS片段

在某些分辨率下（特别是在firefox中），当我缩放页面（CTR-）时，模板页面正在崩溃。 我找不到解决这个问题的办法

作为替代方案，我将div.right-wrapper和div.right-column的宽度减少了1 px。 但这并不完全符合规范

有人有想法吗？ 谢谢

左列
内容栏
右栏
.main_content.3栏{
背景：#fff；
宽度：998px；
保证金：0自动；
}
.main\u content.3列。main\u content\u inner{
填充：0 10px；
}
.左栏{
宽度：199px；
填充：15px 10px 15px 0；
右边框：1px实心#e8eaec；
浮动：左；
背景：红色；
}
.右包装器{
宽度：768px；
左边框：1px实心#e8eaec；
左边距：-1px；
浮动：左；
}
.内容栏{
宽度：558px；
浮动：左；
填充：15px 10px；
背景：绿色；
}
.右栏{
宽度：190px；
浮动：左；
填充：15px 0 15px 0；
溢出：隐藏；
背景：蓝色；
}
.clr{
明确：两者皆有；
字号：0；
身高：0；
线高：0；
溢出：隐藏；
}
.main_content.3列h1{
字体：标准24px/12px Arial，Tahoma，无衬线；
颜色：#fff；
保证金：5px；
}

如果要缩放布局，请使用相对尺寸（如em或ex），而不是绝对尺寸（如px）

我建议将html元素的字体大小设置为10px，以便在更改字体大小之前，处处1em=10px：

html {font-size: 10px}

---

如果你想要一个div是993px，就把它设为99.3em。现在，您的布局将进行缩放。

我找到了针对特定情况的下一个最佳解决方案

1） 移除块右包装器

2） 为块添加了样式

div.content-column {
   border-left: 1px solid #e8eaec;
   margin-left: -1px;
   padding-right: 0;
}

div.right-column {
   float: right;
}

3） 为块添加了样式

div.content-column {
   border-left: 1px solid #e8eaec;
   margin-left: -1px;
   padding-right: 0;
}

div.right-column {
   float: right;
}

我设置了块的下一个宽度：

div.left-column {
   border-right: 1px solid #E8EAEC;
   float: left;
   padding: 15px 10px 15px 0;
   width: 199px;
}

div.content-column {
   border-left: 1px solid #E8EAEC;
   float: left;
   margin-left: -1px;
   padding: 15px 0 15px 10px;
   width: 558px;
}

div.right-column {
   float: right;
   overflow: hidden;
   width: 190px;
}

由于内容列和右列之间的10像素间距
缩放时模板未折叠

请评论我的解决方案

---

感谢大家的参与。

也许现在还没有，但这是我们最终的目标：