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

K

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?!
 
S

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

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
 
S

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


K Viltersten said:
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!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,733
Messages
2,569,440
Members
44,830
Latest member
ZADIva7383

Latest Threads

Top