This is driving me insane.

What is happening here? The green <div> should be the same width as the table - and that width should be 830px.

It looks like IE is stretching the table wider than it should be... but if so then why?

When you consider that the table is 830px wide, the pink div is 730px, the green div is 850px, the red div is 620px and the blue div is 100px, you can see that absolutely nothing is lining up correctly. It all seems quite random.

---------------------------------

// containg div
<div style="width:834px; padding:0; margin:0 auto; clear:both; text-align: left; float:left;">

// table
<table width="830px" cols="10" rows="$rows" cellpadding="4" cellspacing="1" style="border-top:1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC;">

// pink div
<div style="border: 2px solid #FF00FF; width:730px; padding: 0; margin:0;"> </div>

// green div
<div style="width:100%; margin:0; padding:0; border: 2px solid #00FF00;">

// red div
<div style="border:2px dashed #FF0000; float:left; width:620px; margin: 0; padding: 2px 2px 2px 100px; text-align:center;">

// blue div
<div style="border:2px dashed #0000FF; float:right; width:100px; text-align:right; margin: 0; padding: 2px;">

------------------------------------

Internet Explorer:
http://www.psychonauts.info/temp/ie.jpg

Firefox:
http://www.psychonauts.info/temp/ff.jpg

Thanks,