Layout and sizing help in IE

HTML & CSS
1

Dear All,
We have got 3 divs as below. What we would like to do is that the inner div gpsDataDiv will be table populate and later just assign here using this method document.getElementById(“gpsDataDiv”).innerHTML = htmlString;.
The problem here is that in IE there is space between the two div and also the data does not stop at 400px but it goes right down all the way and the presentation looks funny. How to overcome this problem?

    <body>
     <div id="left" style="width:220px;height:350px;float:left;background:white;">
     	  <div id="gpsDataDiv" style="overflow: auto; max-height: 400px;background:white;"></div>
    </div>
     <div id="map" style="top:0px;left:220px;height:100%">Map goes here.
      </div>	
    </body>
2

In my opinion, your code run correctly in IE 7 and higher. IE 6 and lower version do not understand the max-height property. So, you could fix as follow:

<body>
     <div id="left" style="width:220px;height:350px;float:left;background:white;">
     	  <div id="gpsDataDiv" style="overflow: auto; max-height: 400px;height:expression(this.parentNode.offsetHeight > 400 ? "400px" : "auto");background:white;"></div>
    </div>
     <div id="map" style="top:0px;left:220px;height:100%">Map goes here.
      </div>	
    </body>

I think it will be correct in IE 6. However, it is not a best solution because the expression value will be execute on IE 7 and higher too while we are unwanted. You could read this page and try your proper solution properly.
http://xme.im/fix-min-max-height-and-width-in-ie6