UltraKiller
New Member
I have the page layout of the three columns of fixed width.See the following snippet of HTML and CSSAt some resolutions the monitor (especially in the firefox), when I am scaling page (CTR-), template page is collapsing.I can not find a solution to this problem.As an alternative, I reduced width of 1 px for div.right-wrapper and div.right-column.But that not exactly to specifications.Does anyone have ideas?Thanks.\[code\]<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;}\[/code\]