Как добиться двухколоночного макета с помощью следующего HTML-кода?

Question

Я не могу заставить мой CSS работать должным образом в IE (я использую IE 8), и я надеюсь, что кто-то может поделиться некоторыми мнениями по этому поводу.

Вот мой тупой HTMLкод: -

<div id="column-content">
    <div id="content">
        <p>This is some text</p>
        <div class="toc">Right content</div>
    </div>
</div>          

Я хочу, чтобы div#column-content отображался с левой стороны, а вложенный div.toc - с правой стороны вне контейнера div#column-content.Думайте об этом как о двухколоночном макете, но единственная проблема в том, что я не могу радикально изменить этот HTML-код, чтобы имитировать некоторые из более простых макетов, которые я нашел на веб-сайтах.Итак, единственное решение для меня - возиться с CSS, чтобы он выглядел так, как я хотел.

Вот что у меня есть для моего CSS: -

#column-content {
    width: 50%;
    float: right;
}

#content {
    margin: 0 15em 0 0;
    position: relative;
    border: 1px solid #ccc;
    background-color:yellow;
}

div.toc {
    margin:-3.3em -14em 0 0;
    width:200px;
    float:right;
    border: 1px solid #ccc;
    background-color:pink;
}

Яполучать нужные мне эффекты в Firefox и во всех браузерах Gecko.Если вы просматриваете его в Firefox, вы можете увидеть четкое разделение между желтой рамкой и розовой рамкой.Когда я смотрю в IE, кажется, что эти блоки прилипают друг к другу, и я не могу достичь этого разрыва между блоками.

Возможно ли, чтобы это работало во всех браузерах?Просто чтобы быть немного более понятным в HTML, div.toc всегда находится внутри контейнера div#content.Мне разрешено добавлять дополнительные теги HTML в div#content и настраивать CSS, чтобы работать с двумя колонками.

Большое спасибо.

Answer 1

Изменение

div.toc {margin:-3.3em -14em 0 0;}

На

div.toc {margin:-3.3em -14em 0 1em;}

Работало для меня (опять же, на мой комментарий к вашему вопросу, для IE7) и не влияло на рендеринг FireFox (я сделалне проверять любые другие браузеры).По-видимому, IE7 не будет перемещать его дальше через отрицательное правое поле, но добавление левого поля сделало ваш пробел.

Я также думаю, что вы получите лучшие результаты, если сначала поместите div.toc под свой content и удалите верхнее поле -3.3em.Итак:

<div id="column-content">
    <div id="content">
        <div class="toc">Right content</div>
        <p>This is some text</p>
    </div>
</div> 

С:

div.toc {margin: 0 -14em 0 1em;}