I'm having trouble getting my CSS to work properly in IE 8. Any suggestions on how to fix this?
Here's the simplified HTML code I'm using:
<div id="column-content">
<div id="content">
<p>This is some text</p>
<div class="toc">Right content</div>
</div>
</div>
I want div#column-content to display on the left and the nested div.toc on the right, outside of the div#column-content container. It's like a two-column layout, but I can't change the HTML much, so I have to play around with the CSS.
This is my CSS code:
#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;
}
In Firefox, the layout looks perfect with clear separation between the yellow and pink boxes. However, in IE, they seem to overlap without the intended gap.
Is there a way to make this work seamlessly in all browsers? The div.toc must always be inside the div#content container. I can add more HTML tags within div#content if needed to adjust the CSS for the two-column layout.
Any help would be greatly appreciated!