Масштабирование страницы (ctr + ctr-), свернутый шаблон

Question

У меня есть макет страницы из трех столбцов фиксированной ширины. Смотрите следующий фрагмент HTML и CSS

При некоторых разрешениях монитор (особенно в Firefox), когда я масштабирую страницу (CTR-), страница шаблона рушится. Я не могу найти решение этой проблемы.

В качестве альтернативы я уменьшил ширину на 1 px для div.right-wrapper и div.right-column. Но это не совсем в спецификации.

У кого-нибудь есть идеи? Спасибо.

<div class="main_content three-column">
      <div class="main_content_inner">
         <div class="left-column">
            <h1>Left column</h1>
         </div>
         <div class="right-wrapper">
            <div class="content-column">
               <h1>Content column</h1>
            </div>
            <div class="right-column">
               <h1>Right column</h1>
            </div>
            <div class="clr"></div>
         </div>
         <div class="clr"></div>
   </div>
</div>



.main_content.three-column {
    background: #fff;
    width: 998px;
    margin: 0 auto;
}

.main_content.three-column .main_content_inner {
    padding: 0 10px;
}

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

.right-wrapper { 
    width: 768px; 
    border-left: 1px solid #e8eaec;
    margin-left: -1px;  
    float: left;
}

.content-column {
    width: 558px;
    float: left;
    padding: 15px 10px;
    background: green;
}

.right-column {
   width: 190px;
   float: left;
   padding: 15px 0 15px 0;
   overflow: hidden;
   background: blue;
}

.clr {
    clear: both;
    font-size: 0;
    height: 0;
    line-height: 0;
    overflow: hidden;
}

.main_content.three-column h1 {
    font: normal 24px/12px Arial, Tahoma, sans-serif;
    color: #fff;    
    margin: 5px;
}

Answer 1

Я нашел следующее оптимальное решение для конкретного случая.

1) Удален блок правой оболочки

2) Добавлены стили для блока

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

3) Добавлены стили для блока

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 пикселей между столбцом содержимого и правым столбцом
шаблон не сворачивается при масштабировании.

Прокомментируйте мое решение, пожалуйста.

Спасибо всем за участие.

Answer 2

Если вы хотите, чтобы макет, масштабируемый, использовал относительные размеры, такие как em или ex, вместо абсолютных размеров, таких как px.

Я рекомендую установить для элемента html размер шрифта 10 пикселей, поэтомучто везде 1em = 10px, пока вы не измените размер шрифта:

html {font-size: 10px}

Тогда, если вы хотите, чтобы div был 993px, просто установите его на 99.3em.Теперь ваш макет будет масштабироваться.