Содержимое слева выравнивается в IE9

Question

У меня возникли проблемы с правильной настройкой содержимого в IE9. Мне никогда не нравился IE, и я просто запрещал его на своих сайтах, но мне это нужно сейчас. Как я могу исправить это, сохранив то же самое в Chrome?

Здесь Вы можете увидеть изображение http://jordan.rave5.com/tmpstuff/index.html Я пробовал пароли для IE, но они ломаются в хроме. : \

Вторая коробка с навигационной панелью справа, содержимое, которое должно быть слева, находится под навигационной панелью. : \

HTML

<div class="large-box"> 
    <div class="large-box-content"> 
     <div class="content-right"> 
      <div class="column-header"> 
       <div class="column-icon"> 
        Title here 
       </div> 
      </div> 
      <p>Some content here...</p> 
      <p>Some content here...</p> 
      <p>Some content here...</p> 
      <p>Some content here...</p> 
      <div class="column-header"> 
       <div class="column-icon"> 
        Title here 
       </div> 
      </div> 
      <p>Some content here...</p> 
      <p>Some content here...</p> 
      <p>Some content here...</p> 
      <p>Some content here...</p> 
     </div> 
     <div class="content-left"> 
      <div class="column-header"> 
       <div class="column-icon"> 
        Title here 
       </div> 
      </div> 
      <p>Some content here...</p> 
      <p>Some content here...</p> 
      <p>Some content here...</p> 
      <p>Some content here...</p> 
      <p>Some content here...</p> 
      <p>Some content here...</p> 
      <div class="column-header"> 
       <div class="column-icon"> 
        Title here 
       </div> 
      </div> 
      <p>Some content here...</p> 
      <p>Some content here...</p> 
     </div> 
    </div> 
</div> 

CSS

.large-box { 
    display: block; 
    transition: height 2s; 
    -webkit-transition: height 2s; 
    width: 74%; 
    min-width: 990px; 
    height: 100%; 
    margin: 20px auto 20px; 
    background-image: url(images/nav-trans.png); 
    background-repeat: repeat; 
    border: 1px solid #242f3e; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    border-radius: 10px; 
    -moz-box-shadow: 0px 0px 14px #121417; 
    -webkit-box-shadow: 0px 0px 14px #121417; 
    box-shadow: 0px 0px 14px #121417; 
    /* For IE 8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=14, Direction=0, Color='#121417')"; 
    overflow-x: hidden; 
} 

.large-box:after { 
    content:''; 
    display:block; 
    clear:both; 
} 

.large-box-content { 
    height: 100%; 
} 

.content-right { 
    float: right; 
    width: 300px; 
    height: auto; 
    padding: 0; 
    margin-left: 0; 
    vertical-align: top; 
    background-image: url(images/blue-trans.png); 
    background-repeat: repeat; 
    border-left: 1px solid #1b232e; 
    -webkit-box-shadow: -5px 0px 3px rgba(18, 25, 39, 0.10); 
    -moz-box-shadow: -5px 0px 3px rgba(18, 25, 39, 0.10); 
    box-shadow: -5px 0px 3px rgba(18, 25, 39, 0.10); 
} 

.content-left { 
    height: auto; 
    padding: 0; 
    margin-right: 300px; 
    vertical-align: top; 
} 

Answer 1

Ваш content-right имеет width, как 300px и border-left, как 1px таким образом, общая ширина 301px. Итак, в content-left вам необходимо указать margin-right как 301px вместо 300px.

.content-left { 
height: auto; 
padding: 0; 
margin-right: 301px; 
vertical-align: top; 
} 

Answer 2

Попробуйте установить ширину 'содержание левого' дел до фиксированной ширины, вместо того, чтобы позволить IE9 понять это для себя ,

Пример:

УС:

.content-left { 
    height: auto; 
    margin-right: 300px; 
    padding: 0; 
    vertical-align: top; 
    width: 1105px; 
}