Member Avatar for newbie14 
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>
  • 5 Contributors
  • 4 Replies
  • 107 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by yoyokapil

Dani AI

Generated

Two distinct issues need separate fixes: the column spacing/layout, and IE ignoring your max-height. was right to check margins; was right that relying on max-height can be fragile in older IE; was also correct to look at padding/margins.

Start here (quick checklist)

  • Ensure a standards DOCTYPE (for example <!DOCTYPE html>). Without it IE can enter quirks mode and break max-height/box calculations.
  • Reset body margins (html, body { margin:0; padding:0; }) so the browser default 8px margin does not create the gap.
  • Don’t use top/left unless the element is positioned. A simple and robust two-column approach is float the left column and give the right column a left margin equal to the left column width.

Practical CSS that works in old and new IE

html,body { height:100%; margin:0; padding:0; }

.wrapper { overflow:hidden; } /* contains floats */

.left-col { float:left; width:220px; background:#fff; box-sizing:border-box; }
.gps-data { height:400px; overflow-y:auto; box-sizing:border-box; zoom:1; } /* zoom:1 triggers hasLayout in old IE */

.content { margin-left:220px; min-height:100%; }

Modern alternative (if you can target newer browsers)

.wrapper { display:flex; align-items:flex-start; }
.left-col { flex:0 0 220px; }
.content { flex:1; }
.gps-data { max-height:400px; overflow-y:auto; }

Troubleshooting tips

  • Use the browser dev tools to inspect computed height and box model (padding/border).
  • If an older IE still misbehaves, add zoom:1 on the element (triggers hasLayout) or serve an IE-specific rule via conditional CSS.
  • If height:100% is used anywhere, set html,body{height:100%} so percent heights resolve correctly.

For reference on cross-browser behavior of max-height, see MDN: max-height.

Recommended Answers

All 4 Replies

Member Avatar for hericles

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.

Member Avatar for Kratos-s-

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.

Member Avatar for ko ko

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

Member Avatar for yoyokapil

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

Edited by yoyokapil
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.