[thelist] nested div's acting weird in IE

[Jon Hall]

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>

</div>
</div>

Here is what it looks like...
http://24.73.16.53/domapi/spinedit.htm

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?

jon