Div becomes child of previous div? - a quirk of CSS? Javascript?

Question

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)

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.

@Quentin, if you call using the wrong slash to close an element "the same question", _yeah_, I guess it has. — Axeman, Aug 07 '15 at 14:49

score 3 · Answer 1 · edited May 23 '17 at 11:59

3

<div>'s cannot self-close, so the browser assumes the second one is the child of the first one:

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

In HTML 5, <foo /> means <foo>, the start tag. It is not a "self-closing tag". Instead, certain elements are designated as having no end tag, for example <br>. These are collectively called void elements. The slash is just syntactic sugar for people who are addicted to XML. Using the slash in a non-void element tag is invalid, but browsers parse it as the start tag anyway, leading to a mismatch in end tags.

^Source

edited May 23 '17 at 11:59

Community

1
1

answered Aug 07 '15 at 14:43

Jacob G

13,762
3
47
67

Okay, that's weird. Because, I did change it _from_ `` when I rewrote the table, and I thought I went through, and did a global replace and changed it back with no improvement. In what I've read about HTML 5, I didn't know that they were going *away* from XML, though. That's handy to know. – Axeman Aug 07 '15 at 14:53

score 0 · Answer 2 · answered Aug 07 '15 at 14:45

0

How about this?

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

answered Aug 07 '15 at 14:45

user2624583

47
1
9

Div becomes child of previous div? - a quirk of CSS? Javascript?

2 Answers2