<div ... /> and <div ...></div>

[K Viltersten]

I experince different behavior when i organize my div's.

My styles are as follows.

<style type="text/css">
.style1{ display: inline-table; height: 250px; width: 400px;
background-color: #ffcccc; }
.style2{ display: inline-table; height: 250px; width: 400px;
background-color: #ccccff; }
</style>

And the code is like this.

<div id="stuff">
<div class="style1" id="container1"></div>
<div class="style2" id="container2"></div>
</div>

The above example renders as supposed to. It gets me
two rectangles placed on one row. The below example
renders to one rectangle only. My guess is that the first
rectangle is behind the last one.

<div id="stuff">
<div class="style1" id="container1" />
<div class="style2" id="container2" />
</div>

Why on Earth does it happen?!

 

[Scott M.]

Closing the <div> tag is not optional. You must always use </div> to close
an opening div tag.

What's happening is that the browser doesn't encounter an end to your fist
div tag so it is thinking that your second div is a child of your first one
and simply putting it inside of the first one.

The only tags that you can self-terminate are ones that do not have a
closing tag (i.e. <br />, <img />, <hr />, <link />, <meta />).

You can't just self-terminate any old tag just because it doesn't have any
content.

-Scott

 

[K Viltersten]

Oh, i thought that

<anything ... />

was just a syntactic sugar for

<anything ...></anything>

and that's why the confusion. Well, you learn
something new every day. Thanks!

--
Regards
K Viltersten

Closing the <div> tag is not optional. You must always use </div> to
close an opening div tag.

What's happening is that the browser doesn't encounter an end to your fist
div tag so it is thinking that your second div is a child of your first
one and simply putting it inside of the first one.

The only tags that you can self-terminate are ones that do not have a
closing tag (i.e. <br />, <img />, <hr />, <link />, <meta />).

You can't just self-terminate any old tag just because it doesn't have any
content.

-Scott

 

[Scott M.]

Nope.

Making a tag self-terminatings is done to satisfy XHTML's requirement that
all opening tags have a closing tag. If the tag is already defined to have
a closing tag (such as div), then you continue to use that. You only add
the self-termination to tags that under HTML's rules never had a closing
tag.

-Scott

Oh, i thought that

<anything ... />

was just a syntactic sugar for

<anything ...></anything>

and that's why the confusion. Well, you learn
something new every day. Thanks!

 

[JM]

was just a syntactic sugar for

<anything ...></anything>

No way!

Whatever the document type definition (DTD) says goes..

John