This forum is now read-only. Please use our new forums at discuss.codecademy.com.

Make a Website: HTML Forum

View Course » View Exercise

91 points
636d0aeba672de980631df1a6bbdcf0e?s=140&d=retro
Submitted by
reprosser
almost 2 years ago

[resolved] Not clear why two <div...> is needed for one section

For this code:

<div class="jumbotron">
  <div class="container">
  ... Text here (<h1>, and/or <p> stuff)
  </div>
</div>

There is a single section for text. I don't see why we need two groups for this.

What would be the difference if only one was used?

  <div class="container">
  ... Text here
  </div>

What are we gaining with two <div>?

8 votes

Best answer

permalink

Hi,

you could use just one div, but you would be limited to how you can style each section. For example,

if you just wrote <div class="container"></div> and then gave the container a background colour of red, it would only be red inside of the containers width. Where as by adding a jumbotron outside of the container, you could have a full width image or background colour with the content inside of a container.

Ive made a quick JS Fiddle to explain - http://jsfiddle.net/keefyboooo/f50Lawtk/

see the jumbotron is not contained on the first version so can stretch to the full width of the page, where as the 2nd version is within the container so you cannot see the red background

Hope that helps

862 points
559668bb9113cb80140006e5_658289431
Submitted by
Keith Light
almost 2 years ago

2 Comments

636d0aeba672de980631df1a6bbdcf0e?s=140&d=retro reprosser almost 2 years ago

Cool. So if I added a 3rd div class, I would have another background/border layer to work with. I guess it just depends on how many layers of style you want to control

8b49519f36822715622c4329adba9eba?s=140&d=retro Gums1025 almost 2 years ago

yes


1 vote

permalink

yeah exactly, sometimes you have to go quite deep, but you gotta be careful of divitis, where you use too many and unnecessary divs.

This type of nesting can also be useful for positioning things, especially with things like image sliders/carousels

862 points
559668bb9113cb80140006e5_658289431
Submitted by
Keith Light
almost 2 years ago

1 Comment

77fbf6dfefd9a96abd837797da944efa?s=140&d=retro Johny almost 2 years ago

Yeah, we should remove unnecessary divs