CSS : 확대/축소가 변경되면 두 열 Div 레이아웃이 잘못 정렬됩니다.

Question

jsFiddle http://jsfiddle.net/Lijo/ryDnn/1/을 참조하십시오. 두 열 레이아웃이 있습니다. 그것은 % 기반 레이아웃입니다 - 그러나 정의 된 최소 너비가 있습니다. 브라우저 (IE8)의 줌을 75 % 이하로 만들면 잘 동작합니다. 확대/축소를 85 %로 만들면 주황색 상자가 내려갑니다. 우리는 어떻게이 불균형을 극복 할 수 있습니까? 주황색 상자는 줌/브라우저 최소화/바탕 화면 해상도와 관계없이 올바른 위치 (이미지와 같이)로 유지되어야합니다. 그것은 내려 가면 안된다. jsFiddle에서

결과 창 : 당신이 뒤에 CSS 이론을 설명 할 수있는 경우에도 http://jsfiddle.net/Lijo/ryDnn/1/embedded/result/

, 그것은 좋은 것입니다.

참고 : 이러한 불일치는 브라우저를 최소화해도 나타납니다.

참고 : 내 데스크톱은 테스트했을 때 1024x768로 구성되었습니다.

---

심지어 leftNavContainer 및 주요 컨테이너에서 여백을 제거한 후, 문제가있다. 퍼센트 취하여, http://jsfiddle.net/Lijo/ryDnn/10/

Answer 1

오류를 반올림을 허용하기 위해 참조하십시오. 왼쪽의 경우 15%이고 84% 인 경우 작동해야합니다.

그러나 은 여백도 추가하는 것이므로 분명히 잘 작동하지 않습니다.

먼저 당신이 오른쪽 여백을 줄 사업부를 넣어하는 래퍼로 두 된 div를 사용하여 다음 (작동하는지 또는 85%)이 div의이 15% 및 84%를 사용하여 얻고, 생각. 그러면 마진이 width 계산을 방해하지 않습니다.

즉, 여백은 div의 너비의 일부가 아닙니다.

때, 의문이 복싱 모델의 아이디어를 얻을 광범위 페이지/웹 관리자를 사용하여 ...

Answer 2

총 폭이 100 % leftNavContainer 촬영 폭이 margin- 때문에 25 % 왼쪽 10px 및 폭 15 %는 mainContainer도 동일

당신이 마진 수단이 폭이 여백 크기

mainContainer CSS의

,536를 관련이 감소 제공하는 경우

 #mainContainer { 

        width:75%; //(or) reduce your margin 
         } 

또는

 #leftNavContainer { 

        width:15%; //(or) reduce your margin 
        margin:5px; 
         }