[thelist] nested div's acting weird in IE

Jon Hall jonhall at ozline.net
Sat Feb 16 18:32:00 CST 2002

I'm trying to do what should be a simple task. Nest 3 div's inside of an
outer div, placing two of the divs on top of each other to the right of
the other div. The end result will be a container for a spin control I'm
trying to build.

The problem I am running into happens only in IE (both 5.5 and 6).
Mozilla does what I expect. Here is the code:

<div id="container" style="position: relative; background-color:red;
height: 20px; width: 100px">

<div id="tBox" style="position: absolute; background-color:green;
top:0px; left: 0px; height: 20px; width: 80px">
<div id="spControl" style="position: absolute; left: 80px;top: 0px;
  background-color:purple; height: 10px; width: 20px"></div>

<div id="spControl2" style="position: absolute; left: 80px;top: 10px;
background-color:black; height: 10px; width: 20px"></div>


Here is what it looks like...

The lower right black div seems to not care what I set the height to. It
insists on being 20px high!

Can anyone tell me what is going on?


More information about the thelist mailing list