You can start with correct markup :
<p class="wideParagraph">This paragraph has width=200px and is contained in a div.
The div is placed within the table cell, which has width=50px
In IE6, Firefox 188.8.131.52 the div has offsetWidth of 200px, but ie7 renders it with 50px.
How can i force ie7 to set div's width by its contents?</p>
<input type=button onclick="alert(document.getElementById('container').offsetWidth);" value="test width">
</html><!-- ><!-- "><!-- '><!-- --></textarea></form>
You page actually 'ends' with :
If it didn't end there,
<!-- "><!-- '>
would be a problem too.
And there are a lot of un-closed tags. :o -See screenshot. These are a direct results of the aforementioned:
Fix this, and all the unclosed tag errors will probably be resolved.
I can't quite imagine what the page is supposed to do but until the markup is corrected, any solution is a bandaid fix. Correctly-coded first, the figure out what/why something isn't working as hoped.