I read through several questions similar to this one before posting, but did not find a solution that worked for me.
I have one page in my site that does not fit the template I use for every other page because the table of info generated for that page is so wide. To make the table show I used overflow-x:visible. The result is exactly what I wanted in every browser except IE. Here is how my div tags are set up:
<body>
<div id="header"></div>
<div id="container">
<div id="left_nav"></div>
<div id="content" style="overflow-x:visible"></div>
</div>
</body>
... and the CSS that matters looks like this:
#content {
background-color: #CCCCCC;
bottom:0px;
font-family: Arial,Helvetica,sans-serif;
font-size:medium;
font-weight:normal;
left:270px;
min-width:505px;/* should be 490px*/
overflow:auto;
overflow-x:hidden;
padding-bottom:20px;
padding-left:20px;
padding-right:5px;
padding-top:10px;
position:absolute;
right:0px;
top:125px;
}
#header {
background-color: #5DB259;
font-family: Arial,Helvetica,sans-serif;
font-size: xx-large;
font-weight: normal;
height: 125px;
left: 0px;
min-width:800px;
position: absolute;
text-align: center;
width: 100%;
top: 0px;
}
#leftnav {
background-color: #999999;
bottom: 0px;
font-family: Arial,Helvetica,sans-serif;
font-size: large;
font-weight: bold;
left: 0px;
overflow: auto;
padding: 20px;
position: absolute;
top: 125px;
width: 230px;
}
The problem is that IE is not giving me two x-axis scroll bars when the browser window width is reduced. The result is that my header div width stays at the specified minimum width of 800px while the overflow from my content is still visible, thus causing a big blank rectangle in the upper right hand corner of my page. What am I missing here?