CSS: Two column Div layout misaligns when Zoom changes

Please see the jsFiddle http://jsfiddle.net/Lijo/ryDnn/1/ . I have two columns layout. It is % based layout – but there is minimum width defined. When I make the zoom (of browser IE8) as 75 % or below, it works well. When I make the zoom as 85%, the orange box goes down. How can we overcome this misalignment? The Orange Box should remain in the correct postion (as shown in the image) irrepective of the zoom/browser minimize/desktop resolution. It should not go down.

Result window in jsFiddle: http://jsfiddle.net/Lijo/ryDnn/1/embedded/result/

Also, it would be great if you can explain the CSS theory behind it.

Note: Such misalignment is observed even when the browser is minimized.

Note: My desktop was configured in 1024 by 768 when this is tested.

Even after removing the margins from leftNavContainer and main container, the issue is there. Please see http://jsfiddle.net/Lijo/ryDnn/10/

Solution 1:

To allow for rounding errors, take of a percent. 15% for left and 84% should work.

However, the problem is that you are adding in margins too, that obviously won't work well.

Consider to first get two divs to use 15% and 84% (or 85% if it works), and then use those two divs as wrappers in which you put a div which you give the right margins. That way, your margins aren't interfering with the width calculations.

In other words, margins aren't part of the div's width.

When in doubt, use a Page/Web Inspector extensively to get an idea of the boxing models...

Solution 2:

your total width is 100% leftNavContainer taken width is 25% because margin-left-10px and width-15% ,mainContainer is also same

if you are giving margin means reduce your width related to margin size

mainContainer css

      #mainContainer {

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

or

       #leftNavContainer {

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