Adjacent divs getting nested by VS

Question

I was toying with some layout for a progress indicator in an ASP.NET project in VS 2013, and I found something odd in the markup that it generated. My .aspx page contains the following code:

<div id="divProgressBar">
        <div id="divProgressVisual">
            <asp:Image ID="imgCircle1" runat="server" CssClass="progress circle" style="margin-left: 34px;" ImageUrl="images/GrayCircle.png" />
            <asp:Image ID="imgLine2" runat="server" CssClass="progress line" ImageUrl="images/GrayLine.png" />
            <asp:Image ID="imgCircle2" runat="server" CssClass="progress circle" ImageUrl="images/GrayCircle.png" />
            <asp:Image ID="imgLine3" runat="server" CssClass="progress line" ImageUrl="images/GrayLine.png" />
            <asp:Image ID="imgCircle3" runat="server" CssClass="progress circle" ImageUrl="images/GrayCircle.png" />
            <asp:Image ID="imgLine4" runat="server" CssClass="progress line" ImageUrl="images/GrayLine.png" />
            <asp:Image ID="imgCircle4" runat="server" CssClass="progress circle" ImageUrl="images/GrayCircle.png" />
            <div style="clear: both;" />
        </div>
        <div id="divProgressLabels">
            <span class="labelblock">|<br />Upload File</span>
            <span class="labelblock">|<br />Import Into Database</span>
            <span class="labelblock">|<br />Perform Comparison</span>
            <span class="labelblock">|<br />Export File</span>
            <div style="clear: both;" />
        </div>
    </div>

This div is getting dropped into a master page, for what it's worth. Don't worry about the CSS, because this isn't a layout issue.

When I view the resulting HTML in Firebug, I see this:

<div id="divProgressBar">
  <div id="divProgressVisual">
    <img id="MainContent_imgCircle1" class="progress circle" src="images/GrayCircle.png" style="margin-left: 34px;">
    <img id="MainContent_imgLine2" class="progress line" src="images/GrayLine.png">
    <img id="MainContent_imgCircle2" class="progress circle" src="images/GrayCircle.png">
    <img id="MainContent_imgLine3" class="progress line" src="images/GrayLine.png">
    <img id="MainContent_imgCircle3" class="progress circle" src="images/GrayCircle.png">
    <img id="MainContent_imgLine4" class="progress line" src="images/GrayLine.png">
    <img id="MainContent_imgCircle4" class="progress circle" src="images/GrayCircle.png">
    <div style="clear: both;"> </div>
    <div id="divProgressLabels">
      <span class="labelblock">
        |
        <br>
        Upload File
      </span>
      <span class="labelblock">
        |
        <br>
        Import Into Database
      </span>
      <span class="labelblock">
        |
        <br>
        Perform Comparison
      </span>
      <span class="labelblock">
        |
        <br>
        Export File
      </span>
      <div style="clear: both;"> </div>
    </div>
  </div>
</div>

divProgressLabels is suddenly nested inside of divProgressVisual! This isn't causing any layout problems in this case, but it's rather weird and I'd like to know why it's doing this and how to stop it.

score 1 · Accepted Answer · edited May 23 '17 at 12:33

1

Change

<div style="clear: both;" />

to

<div style="clear: both;"></div>

See also Are self-closing tags valid in HTML5?.

edited May 23 '17 at 12:33

Community

1
1

answered Sep 30 '16 at 21:58

John Wu

50,556
8
44
80

Not at all, the rules are sort of Byzantine. – John Wu Oct 03 '16 at 15:12

Adjacent divs getting nested by VS

1 Answers1