Search code examples
cssinternet-explorer-6

IE6 - how to overflow div contents outside the div

I have a layout with a header, left nav and right content section. When right content is too wide to fit in the parent containers (divs), I'd like the content to overflow the div to the right. This is working in modern browsers as I'd like, but IE6 is preventing the overflow, and subsequently forcing the left navigation below the right content. Any suggestions? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <body>
        <div id="container" style="width:984px;margin:0 auto;">
            <div id="header" style="height:76px;background-color:#69B8E1">Site Header</div>
            <div id="contentWrapper" style="float:right;margin-left:-175px;width:100%">
                <div id="rightContent" style="margin-left:165px;background-color:#C6DDDF;">
                    <table>
                        <tr>
                            <th>
                                Very lengthy description</th>
                            <th>
                                Very lengthy description</th>
                            <th>
                                Very lengthy description</th>
                            <th>
                                Very lengthy description</th>
                            <th>
                                Very lengthy description</th>
                            <th>
                                Very lengthy description</th>
                            <th>
                                Very lengthy description</th>
                            <th>
                                Very lengthy description</th>
                            <th>
                                Very lengthy description</th>
                            <th>
                                Very lengthy description</th>
                            <th>
                                Very lengthy description</th>
                            <th>
                                Very lengthy description</th>
                            <th>
                                Very lengthy description</th>
                        </tr>
                    </table>
                </div>
            </div>
            <div id="leftMenu" style="float:left;width:150px;background-color:#C4DF9B">Left 
                Menu</div>
        </div>
    </body>
</html>
Solution

  • UPDATED:

    <div id="contentWrapper" style="position:relative;float:right;margin-left:-175px;width:100%">
<div id="rightContent" style="position:absolute;top:0;left:0;margin-left:165px;background-color:#C6DDDF;">