Div becomes child of previous div? – a quirk of CSS? Javascript? [duplicate]

This question already has an answer here:

It’s working this way on all the browsers I can see the page from. I swear to you that this is the exact code from the html:

<td class="bardisplay">
  <div class="bar hot" />
  <div class="bar cool" />
</td>

But yet in the debugger of every single browser I’ve brought this up in, the DOM inspector shows something like this: (Chrome, here)

enter image description here

There is no difference between Mozilla, IE, and Chrome. I about freaked out when I saw it in the Chrome debugger.

Here is all the pertinent CSS:

  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; 
  }

Now, the really weird thing: I did not have this problem, with the same html when I put all my bar displays into a main table (3 levels up).

I had a six-column table, one with a label, one with a display, and one with a ratio, and the next three repeating, but I did not like how the second set of columns would “wag” back and forth as the table was updated. So I set the master table to a single row of two tds with three-column tables inside them. The display is now rock-solid, except that the DOM wants to put one div inside the other.

I googled this about every way I could think before posting here.


Source: cross-browser

Leave a Reply