DIV Opening and Closing Tags Order

Tell us what’s happening:
Describe your issue in detail here.
What rule is followed to decide the order of the div closing tags ? Three tags are put together at the end and one is put some where after “p” tag? What difference does it make if all div closing tags are put together or do they have some order?

  **Your code so far**

<style>
h4 {
  text-align: center;
  background-color: rgba(45, 45, 45, 0.1);
  padding: 10px;
  font-size: 27px;
}
p {
  text-align: justify;
}
.links {
  text-align: left;
  color: black;
  opacity: 0.7; 
}
#thumbnail {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.fullCard {
  width: 245px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px 5px;
  padding: 4px;
}
.cardContent {
  padding: 10px;
}
.cardText {
  margin-bottom: 30px;
}
</style>
<div class="fullCard" id="thumbnail">
<div class="cardContent">
  <div class="cardText">
    <h4>Alphabet</h4>
    <hr>
    <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
  </div>
  <div class="cardLinks">
    <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
    <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
  </div>
</div>
</div>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.164 Safari/537.36

Challenge: Decrease the Opacity of an Element

Link to the challenge:

Divs are containers, they don’t “represent” anything; their main purpose is to divide/group content together.

So it’s up to you and your needs to group items together.
It’s like placing them into boxes, do it as you see fit.

In this case FCC thought that you need a
fullCard div to group items.
Which contains a cardContent div.
Which in turns group two contents: cardText and cardLinks.

Hope it helps :sunny:

1 Like

Thank you Marmiz for the solution. I appreciate a lot. Since I am a complete beginner, could you please make the explanation a bit more easy so as to enable me to understand. Also, why the inconsistencies in the closing div tag? I’ll be grateful if you do so.

At this point it’s probably better if you tell me what’s still unclear, then I’ll try my best to reply and help :slight_smile:

1 Like

Thank you Marmiz. I just want to know a few things:
Why is div tag used and what happens when you write ‘class’ and ‘id’ in the div tag?
When will one know when to close div tag? For example in the above case one div tag is closed immediately after p tag. and the remaining three div tag are closed at the bottom of the code.
What happens for instance when cardlinks class is put inside the div tag?

Thank you for your assistance.

Hi @javedk, sorry for the late reply.

what happens when you write ‘class’ and ‘id’ in the div tag?

Many of your questions will be answered as you progress with your studies, so perhaps this in not the time to answer to such questions

When will one know when to close div tag?

About this, it’s not really about “when” to close, but what to put inside.
For example if you were to code something similar you’d start with your “box” which is composed of an opening and a closing tag.

<div class="my-box">
</div>

Then you place content inside the box:

<div class="my-box">
   <p class="title">Title</p>
</div>

And you keep adding new item in the box as you see fit.
Even more divs:

<div class="my-box">
   <p class="title">Title</p>
   <div class="nested">
       I am nested inside 'my-box'
   </div>
</div>

Hope this makes things clearer.