How to achieve two-column layout with the following HTML code?

Question

I couldn't seem to get my CSS working properly in IE (I'm using IE 8), and I'm hoping someone could share some opinions on this.

Here's my dumb-down HTML code:-

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

What I want is to have div#column-content to be displayed on the left side and the nested div.toc to be displayed on the right side outside of div#column-content container. Think of it as a two column layout, but the only problem is I cannot drastically change this HTML code to mimick some of the easier layouts I have found in the websites. So, the only solution for me is to mess around with the CSS to appear just like what I wanted.

This is what I have for my 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;
}

I'm getting the effects I want in Firefox and all the gecko browsers. If you view it in Firefox, you can see a clear separation between the yellow box and the pink box. When I view it in IE, these boxes seem to stick on each other, and I can't seem to achieve that gap between boxes.

Is this possible to make this work in all browsers? Just to be a little more clear about the HTML, the div.toc is always be inside the div#content container. I am allowed to add more HTML tags within div#content and tweak the CSS to make the two-column layout work.

Thanks much.

Answer 1

Changing

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

To

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

Worked for me (again, per my comment to your question, for IE7), and did not affect the FireFox rendering (I did not check any other browsers). Apparently, IE7 will not move it over any further via the negative right margin, but adding the left margin made your gap.

I also think you will get better results if you place your div.toc first under your content and remove the -3.3em top margin. So:

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

With:

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