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>

If you don't want a gap between the divs reset the margins and padding to zero using CSS.
You can also use the overflow: scroll rule on the gpsDataDiv. It will stay at a max height of 400px but if the content is longer than that a scroll bar will appear and the user can scroll through the content of the div.

The problem from the CSS (Padding,Margin) and IE browser ,Try to make some change in (Padding,Margin) and try to run it from another browser like FireFox or Google Chrome.

max-height does not work on older IE. You should set fixed height instead of max-height.

you can see that on w3schools.com it is nice to learn html and all languages

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.