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

Discussion in 'ASP .Net' started by K Viltersten, Mar 30, 2009.

  1. K Viltersten

    K Viltersten Guest

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

    --
    Regards
    K Viltersten
    K Viltersten, Mar 30, 2009
    #1
    1. Advertising

  2. K Viltersten

    Scott M. Guest

    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" <> wrote in message
    news:...
    >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?!
    >
    > --
    > Regards
    > K Viltersten
    >
    Scott M., Mar 30, 2009
    #2
    1. Advertising

  3. K Viltersten

    K Viltersten Guest

    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
    >
    >
    > "K Viltersten" <> wrote in message
    > news:...
    >>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?!
    >>
    >> --
    >> Regards
    >> K Viltersten
    >>

    >
    >
    K Viltersten, Mar 30, 2009
    #3
  4. K Viltersten

    Scott M. Guest

    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" <> wrote in message
    news:Ow7B$...
    > 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
    >>
    >>
    >> "K Viltersten" <> wrote in message
    >> news:...
    >>>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?!
    >>>
    >>> --
    >>> Regards
    >>> K Viltersten
    >>>

    >>
    >>

    >
    Scott M., Mar 30, 2009
    #4
  5. K Viltersten

    JM Guest

    > <anything ... />
    >
    > was just a syntactic sugar for
    >
    > <anything ...></anything>


    No way!

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

    John
    JM, Mar 31, 2009
    #5
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kate
    Replies:
    4
    Views:
    620
  2. Kate
    Replies:
    1
    Views:
    438
    Oli Filth
    Feb 19, 2005
  3. Mica Cooper

    DIV and DIV on different lines

    Mica Cooper, Aug 11, 2005, in forum: HTML
    Replies:
    4
    Views:
    1,160
    dorayme
    Aug 12, 2005
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    173
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    294
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page