防止上一个（流体）列在浏览器调整大小时下降？

Question

我有这样的布局：

/*Sidebar*/ /*Column1*/ /*Column2*/ /*Column3*/ /*Sidebar*/

所以现在我想制作一个流畅的布局，当在桌面计算机上查看它看起来不错但是在缩小窗口（Ipad）上查看时出现问题所以它看起来像这样：

/*Sidebar*/ /*Column1*/ /*Column2*/ /*Sidebar*/ 
            /*Column3*/

我的css：

#blogwrapper {
background-color:#F2F2F2;
margin:0 auto;
max-width: 56%; 
}

.sidebar_sec {
width:21%;
float: left;
}

#blogs_three_cols .left_column {
float:left;
width: 32.7%;
}

#blogs_three_cols .middle_column {
float:left;
margin-left:0.5em;
width: 32.7%;   
}

#blogs_three_cols .right_column {   
margin-left:0.5em;
width: 32.7%;
float:left;
}

您可以看到问题HERE（尝试减少浏览器尺寸）。

所以我的问题是如何在调整浏览器窗口大小时阻止我的上一栏落下？谢谢！

Answer 1

调整中间和右侧列的margin-left以使用%而非em，其值等于100 - 三个div的总宽度（此为0.95％）情况下）

#blogs_three_cols .middle_column {
float:left;
margin-left: 0.95%;
width: 32.7%;   
}

#blogs_three_cols .right_column {   
margin-left: 0.95%;
width: 32.7%;
float:left;
}