modifying display style is causing IE to change column padding

[aparth]

Hi I was wondering if someone could help me with this annoying problem that is only happening in IE (FF is fine). I have some simple code which just displays some hidden text when a "+" is clicked. All that's happening here is the elements style is being changed from display:none to display:block.


<div id="container">
<!-- main section, for functionality -->
<div id="center" class="column">
Title <a href="#" onclick="expand('text1', this);">+</a><br>
<div id="text1" style="display:none; color:blue;background-color:#c1c1c1">HIDDEN TEXT</div>
</div>
<!-- left column -->
<div id="left" class="column">
<?include("left_column.php");?>
</div>
<!-- right column -->
<div id="right" class="column">
<?include("right_column.php");?>
</div>
</div>


Javascript function:

function expand(thistag, tag) {
styleObj=document.getElementById(thistag).style;
if (styleObj.display=='none')
{
styleObj.display='block';
tag.innerHTML = "-";
}
else {
styleObj.display='none';
tag.innerHTML = "+";
}
}

However when this happens in IE, the floated left column on my page increases its padding so that the layout appearance is ruined. I think it may have something to do with the "double margin float" bug but I'm not completely familiar with it. Any ideas?

This is the columns CSS:


#container {
padding-left: 170px; /* Left Column fullwidth */
padding-right: 190px; /* Right Column fullwidth + CC padding */
}

#container .column {
position: relative;
float: left;
text-align: left;
}

#center {
padding: 0px 20px;
background: #FFFFFF;
width: 100%;
}

#left {
width: 150px; /* Left Column width */
padding: 0px 10px; /* Left Column padding */
right: 220px; /* Left Column fullwidth + Centre Column padding */
margin-left: -100%;
background: #FFFFFF;
border-right: thin dotted black;
}

#right {
width: 130px; /* Right Column width */
padding: 0px 10px; /* Right Column padding */
margin-right: -100%;
background: #FFFFFF;
border-left: thin dotted black;
}

/*** IE FIXES ***/
* html #left {
left: 165px; /* Right Column fullwidth */
padding-top: 1em;
display:inline;
}

* html #center {
padding-top: 1em;
}

* html #right {
padding-top: 1em;
}


thanks, andy