This forum is now read-only. Please use our new forums! Go to forums

0 points
Submitted by Ryan
over 9 years

Is nesting multiple <div>'s necessary?

Hi.

In the example code for Multiple Selectors, the separate div’s are not clearly distinguished with closing brackets. They appear this way

< div>first example text < div>second example text < div>third example text < /div> < /div> < /div>

The three closing brackets all appear at once at the end, which initially confused me.

Would it be okay instead to use closing brackets after each div? See below:

< div>first example text < /div> < div>< div>second example text< /div>< /div> < div>< div>< div>third example text< /div>< /div>< /div>

This seems a little more in line with what the other courses taught. Is there a reason not to do it this way and to group the closing brackets together on one line?

Thank you!

Answer 53e90a3080ff332031000206

1 vote

Permalink

Hi, this is what I would do, but I’m not sure if that would make the course’s SCT happy.

Just a quick question: Why on earth would you have 2 or 3 <div>s for something when 1 will do?

points
Submitted by Zeke Y
over 9 years

2 comments

coop508 over 9 years

Why not answer the question.

Zeke Y over 9 years

I did, just in an indirect way. it’s just fine to do it the way he had, and makes more sense than the way they had us do it.

Answer 53ed0e28548c352d9f000095

1 vote

Permalink

;The first example sets up divisions within divisions. Maybe smaller blocks of info within larger blocks of info. The second example sets up 3 blocks that can separately be located anywhere on the page; where as the first inner blocks(div) will move with the outside div.

points
Submitted by coop508
over 9 years

2 comments

Zeke Y over 9 years

Yes, they will move with the parent div, but it’s horrible practice to do it that way.

Ryan over 9 years

Thanks coop and Zeke. Makes sense to me now. Cheers.

Answer 53ee777d7c82ca6c5a000958

1 vote

Permalink

Just wanted to throw this reminder out there: With nested tags, the first tag opened is the last tag closed.

You can think of it like those Russian nesting dolls. That’s how nesting code works. One thing inside of another.

<div>
<p> The paragraph nesting doll goes inside the div nesting doll. </p>
</div>
points
Submitted by Jem Cope
over 9 years

Answer 53fa674e631fe9794c00754c

-5 votes

Permalink

Further to what Jem said, there is a visual difference between nesting and not-nesting div’s in html code. Below is the same code in css applied to the different pattern of div’s. put this code into “stylesheet.css”:

div {
    background-color: #abcdef;
    border: 2px solid black;
    font-size: 25px;
    padding: 10px;
}

Now put this code into the html tab

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>Result</title>
    </head>
    <body>
        <h3>I'm plain old font!</h3>
        <div>
            <h3>Me, too!</h3>
            <div>
                <h3>Me three!</h3>
                <div>
                    <h3>Forget you guys. I'm about to be red!</h3>
                </div>
            </div>
        </div>
        <div>Me too!</div>
        <div>Me three!</div>
        <div>Forget it!</div>
    </body>
</html>

See the result…

points
Submitted by stunerd
over 9 years

1 comments

JakeKimbo over 8 years

I’m going to point out that the code you have posted will not work simple as that. The reason is because the “h3 nested inside three

s red!”. To summarise that code is wrong.