On every browser I've checked, the code in the html is exactly the same:
<td class="bardisplay">
<div class="bar hot" />
<div class="bar cool" />
</td>
However, in the debugger of each browser, including Chrome, the DOM inspector displays something like this: (Chrome, shown below)
https://i.sstatic.net/GIJdT.gif
The display issue is consistent across Mozilla, IE, and Chrome. It was quite surprising to see it in the Chrome debugger.
Below is the relevant CSS code:
td.bardisplay {
height : 66px;
padding : 8px 0px;
margin-left : 5pt;
}
.bar { height : 50px; }
.hot {
float : left;
background-color : red;
}
.cool {
float : left;
background-color : green;
}
What's even stranger is that when I placed all my bar displays into a main table (3 levels up), I didn't encounter this issue with the same html.
Previously, I had a six-column table with labels, displays, and ratios that were repeating. However, I didn't like how the second set of columns would shift back and forth when the table was updated. So I changed the layout to a single row of two tds with three-column tables inside them. Now, the display is stable, except for the issue of the DOM wanting to nest one div inside the other.
I searched extensively before posting this issue here.