# Coding Div Tags

**URL:** <https://forum.kirupa.com/t/coding-div-tags/645107>\
**Category:** Uncategorized\
**Created:** [November 28, 2020, 4:07pm UTC](https://forum.kirupa.com/t/coding-div-tags/645107 "2020-11-28T16:07:58Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [November 28, 2020, 4:07pm UTC](https://forum.kirupa.com/t/coding-div-tags/645107/1 "2020-11-28T16:07:58Z")

</div>

```
<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

> **[Centering Vertically and Horizontally Using Flexbox](https://www.kirupa.com/html5/centering_vertically_horizontally.htm)**
>
> In CSS, learn how to use flexbox to easily center your content both vertically as well as horizontally.

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

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [November 28, 2020, 4:09pm UTC](https://forum.kirupa.com/t/coding-div-tags/645107/2 "2020-11-28T16:09:50Z")

</div>

```
<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.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 28, 2020, 5:52pm UTC](https://forum.kirupa.com/t/coding-div-tags/645107/3 "2020-11-28T17:52:00Z")

</div>

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>

```

🙂

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [November 29, 2020, 2:59am UTC](https://forum.kirupa.com/t/coding-div-tags/645107/4 "2020-11-29T02:59:33Z")

</div>

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>
```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 29, 2020, 5:45am UTC](https://forum.kirupa.com/t/coding-div-tags/645107/5 "2020-11-29T05:45:27Z")

</div>

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 😛

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [November 29, 2020, 3:26pm UTC](https://forum.kirupa.com/t/coding-div-tags/645107/6 "2020-11-29T15:26:17Z")

</div>

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.