2

I have the following HTML page (see jsfiddle) that contains a parent div with three children divs. I'm expecting to see the three divs one next to the other. Instead, I see that each child div is contained inside its sibling.

My web page HTML contains this:

<div id="div1">
    <div id="div11" />
    <div id="div12" />
    <div id="div13"/>
</div>

however when I do "Inspect element" (in both IE and Chrome) I get this:

<div id="div1">
    <div id="div11">
        <div id="div12">
            <div id="div13"></div> 
        </div>
    </div>  
</div>

What's wrong with this markup?

ps0604
  • 1,227
  • 23
  • 133
  • 330
  • possible duplicate of [Are self-closing tags valid in HTML5?](http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5) – i alarmed alien Oct 14 '14 at 23:32

2 Answers2

4

<div> elements are not self-closing in HTML4 or HTML5; you need to add an end tag for each one. Thus this:

<div id="div1">
    <div id="div11" />
    <div id="div12" />
    <div id="div13"/>
</div>

should be this:

<div id="div1">
    <div id="div11"></div>
    <div id="div12"></div>
    <div id="div13"></div>
</div>

The browser will fill in the missing closing tags, which is why you've got the nested structure--the browser assumes that the tree was supposed to be nested and closes the tags appropriately.

You can always run your code through an HTML validator (e.g. http://validator.w3.org) to check for simple errors like this.

i alarmed alien
  • 9,412
  • 3
  • 27
  • 40
0

Div is an open-close tag. you should specify the open tag <div> with the siblings as you did in the parent div . here's the right markup 

<div id="div1">

  <div id="div11">
  </div><!--end div11-->

  <div id="div12">
  </div><!--end div12-->

  <div id="div13">
  </div><!--end div13-->

</div><!--end parent div-->
khaled fares
  • 41
  • 4