Запретить удаление последнего (текучего) столбца при изменении размера браузера?

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 - общая ширина трех дивы (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; 
}