Coding Div Tags

#1 
<div id="outer">
    <div id="blueDiv">
    </div>
</div>

I am a beginner to htlml so the following question may seem silly but I thought that a div tag had to open with

and close with
so in the above example, taken from 
- are we not missing an opening </div> tag
- and we have 2 </div>'s to close when we only needed 1

so I thought that the above code could be written as

what do you think?

#2 
<div>
    <div id="outer">
    <div id="blueDiv">
</div>

Sorry, this didn’t come in on the original post - I should have used the pre-formatted text button on it.

#3

The code in the tutorial is:

<div id="outer">
    <div id="blueDiv">
    </div>
</div>

Notice that we do have two div elements with their respective opening/closing tags. It just so happens that the blueDiv element is nested inside the outer element. This nesting is an important part of making the centering work, so we can’t have them be peers like in your suggestion. If we did have them be peers, then you will need closing tags as follows:

<div>
    <div id="outer"></div>
    <div id="blueDiv"></div>
</div>

:slight_smile:

#4

OK - I see most of what you are saying here, including the nesting but in your code -

<div id="outer">
    <div id="blueDiv">
    </div>
</div>

are we not missing the opening div tag, namely - <div> - so that the code should look like -

<div> 
<div id="outer">
    <div id="blueDiv">
    </div>
</div>
#5

No, the <div id="outer"> is the opening div tag. It just happens to have the id attribute in it, but that doesn’t negate the role of it still being the opening tag :stuck_out_tongue:

#6

Perfect! My mind is now completely at ease. I thought that you needed

<div>        

    
</div>

this absolute symmetry. Your really good answer tells me it isn’t so. That was a very productive back and forth - thank you.

1 Like