Forum Moderators: not2easy
The problem is that there is another DIV (class="header") inside the container. The HEADER DIV is inherting the min-width of the CONTAINER DIV in IE 7, instead of going the entire width of the CONTAINER DIV
<html>
<head>
<style type="text/css">
.container {
border: 1px solid green;
width: auto;
min-width: 200px;
display: table;
}
.header {
background: gray;
font-size: 12pt;
padding: 2px;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
This Is The Header
</div> <table border="1" cellpadding="2" cellspacing="0" width="300">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
</div>
</body>
</html>
sorry not quite seeing what you're describing with the code above in IE7 the header is 100% of the page width?
IE doesn't support display: table (or any of the table properties) yet.. on its way in IE8, but maybe using inline-block for it would help?
.container {
border: 1px solid green;
min-width: 200px;
display: table;
}.header {
background: gray;
font-size: 12pt;
padding: 2px;
}
</style><!--[if lte ie 7]>
<style type="text/css" media="screen">
.container {display: inline-block;}
.container {display: inline;}
</style>
<![endif]-->
IE has to have it in 2 x separate rules like that as it doesn't support inline-block on block level elements yet.
might work, but like I said I'm not seeing what you're seeing so it could be the wrong tack
-Suzy
