Home/ Questions/Q 6169215
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T22:49:12+00:00

The HTML code below consistently results in TEXT A and TEXTB not being horizontally

  • 0

The HTML code below consistently results in TEXT A and TEXTB not being horizontally aligned but removing <div style="display:none;">&nbsp;</div> fixes the alignment. I discovered that using div elements instead of p elements fixing this issue, but am wondering what is actually going on. I saw this behavior in in Opera, Firefox, IE (IE actually puts TEXTB on a separate line), and Chrome.

My expectation was that a div with display:none would not have any impact on formatting.

<html>
    <body>
        <div style="border-top-style: solid;">
            <p style="float:left; width:280px;">
                TEXT A<div style="display:none;">&nbsp;</div>
            </p>
            <p style="float:left;">
                TEXTB
            </p>
        </div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    div is not a valid child of p, so the browser applies error correction to the HTML to end up with this:

    <div style="border-top-style: solid;">
    <p style="float:left; width:280px;">
        TEXT A</p><div style="display:none;">&nbsp;</div>
    <p></p>
    <p style="float:left;">
        TEXTB
    </p>
</div>

    (HTML taken from Chrome’s Inspector)

    Note the extra p element.

    • 0