Stretching width correctly to 100% of an inline-block element in IE6 and IE7
- by Simon Lieschke
I have the following markup, where I am attempting to get the right hand side of the second table to align with the right hand side of the heading above it. This works in IE8, Firefox and Chrome, but in IE6/7 the table is incorrectly stretched to fill the width of the page.
I'm using the Trip Switch hasLayout trigger to apply inline-block in IE6/7.
Does anyone know how (or even if) I can get the table only to fill the natural width of the wrapper element displayed with inline-block in IE6/7?
You can see the code running live at http://jsbin.com/uyuva.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style>
.wrapper {
display: inline-block;
border: 1px solid green;
}
/*
display: inline-block triggers the wrapper element to have layout for IE 6/7.
The trip switch then provides the inline component of the display behaviour.
See http://www.brunildo.org/test/InlineBlockLayout.html for more details.
*/
.wrapper {
*display: inline;
}
table {
border: 1px solid red;
}
</style>
</head>
<body>
<h1>No width on table:</h1>
<div class="wrapper">
<h2>The right hand side of the table doesn't stretch to the end of this heading</h2>
<table><tr><td>foo</td></tr></table>
</div> text
<h1>Width on table:</h1>
<div class="wrapper">
<h2>The right hand side of the table should stretch to the end of this heading</h2>
<table style="width: 100%"><tr><td>foo</td></tr></table>
</div> text
</body>
</html>
