Помогите заставить работать HTML / CSS верстку в IE

Question

Нужна помощь в настройке следующего макета в IE:

Светло-серый - это окно браузера.Темно-серый - это основная область содержимого, центрированная относительно окна.Слева - желтая рамка фиксированной ширины, а справа - зеленая рамка переменной ширины.Затем желтый + синий + зеленый триплет повторяется вниз (в основном это простой макет блога).

Я получил это, работая в Firefox / Chrome, используя отрицательное поле left и оставив все три цветных поля.IE не понимает этого.Пробовал заполнить темно-серую область с обеих сторон шириной желтого прямоугольника (а затем сделать переполнение: видимый, пробел: теперь в зеленой рамке) - все равно некуда.Что, черт возьми, понимает IE?

Спасибо

Answer 1

Алекс, трюк здесь довольно прост.Расположите эти два контейнера * fixed_size * и * var_size * абсолютно внутри #main.Дайте #main относительное расположение.Затем, учитывая два абсолютно позиционированных контейнера, отрицательные поля слева и справа соответственно.

Должно работать в IE

Удачи, и дайте мне знать, если вам нужна дополнительная помощь

РЕДАКТИРОВАТЬ: это код, который также виден в Fiddle:

<div id="main">
    lorem ipsum
    <div id="left">&nbsp;
    </div>
    <div id="right">&nbsp;
    </div>
</div>

и CSS:

    #main { 
margin: 0 auto; position: relative; height: 300px; width: 400px; background: gray; 
}
    #left { 
position: absolute; width: 100px; height: 75px; left: -100px; background: red; 
}
    #right { 
position: absolute; width: 100px; height: auto; right: -100px; background: blue; 
}

Очевидно, используйте соответствующие способы для центрирования div в IE с помощью:

    body { 
text-align: center; 
}
    #main { 
text-align: left; margin: 0 auto; 
}

РЕДАКТИРОВАТЬ 2: Проверьте обновленный jsFiddle .. Надеюсь, это то, что вы хотели: http://www.jsfiddle.net/2avM7/3/

Answer 2

Вы должны начать с главного контейнера, который достаточно широк, чтобы посещать все 3 контейнера слева направо, вот так:

<div id="container" style="margin: 0 auto;">
 <div id="fixed_size>Content goes here</div>
 <div id="main_content" style="margin: 0 auto;">Center content</div>
 <div id="variable_size_container">Content for that goes here!<div>
</div>

margin: 0 auto; делает трюк здесь, он центрирует divв центре родительского div.