Home/ Questions/Q 6836431
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T23:21:18+00:00

So I have the following html: <html> <head> <style> .box { height: 100px; width:

  • 0

So I have the following html:

    <html>
<head>
    <style>
        .box
        {
            height: 100px;
            width: 100px;
        }       
        #box1
        {
            background-color: Red;
        }
        #box2
        {
            background-color: Red;
        }
        #box3
        {
            border-style: dotted;
        }
        #box4
        {
            background-color: Red;
        }
    </style>
</head>
<body>
<div id="boxes">
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <div id="box3" class="box"></div>
    <div id="box4" class="box"></div>
</div>
</body>
</html>

If I change any of the div tags to their single tag version, for example: 

<div id="box1" class="box"/>

the subsequent tags become nested, at least in Chrome, Firefox and IE. Does anyone know the deal regarding this behavior? It seems like a bug to me.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    <div> is not a valid self-closing tag in an HTML document. If you’d serve it as XHTML then it should work (if it doesn’t, it’s a browser bug).

    You should also keep in mind that Doctype doesn’t change how the document is interpreted, only mime-type (so it will work if you serve the document with Content-Type application/xhtml+xml) – you can read more here: http://www.webdevout.net/articles/beware-of-xhtml#content_type

    • 0