Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website CSS: Cascading Style Sheets Use ID Selectors

Tony Bee
Tony Bee
1,686 Points
Posted by Tony Bee
Tony Bee
1,686 Points

Why do we need a wrapper div?

Why do we need to wrap the 'section' element inside a wrapper div?

Can't we just target the 'section' element in our main.css, rather than targeting #wrapper and styling that?

Thanks

Tony Bee
Tony Bee
1,686 Points
Tony Bee
Tony Bee
1,686 Points

My apologies, I just watched the video again and realised that Nick wrapped both the 'section' element AND the 'footer' element within the div wrapper.

However the question still stands. Why can't we just write something like this in our main.css:

section, footer {
  ...
}

rather than introducing a wrapper div and then writing:

#wrapper {
  ...
}

It seems odd to introduce a new element when we can just style the semantic elements we've chosen already within our markup?

4 Answers

nik
nik
8,925 Points

By having all your major elements inside a wrapper, it reduces the chances of your layout getting screwed to some degree. It also provides a solution for different browsers as some may display your layout differently or slightly off. An example would be designing a responsive layout.

Michael Alaev
Michael Alaev
5,415 Points
Michael Alaev
Michael Alaev
5,415 Points

Div wrapper is for centering the content on the page.

Tony Bee
Tony Bee
1,686 Points
Tony Bee
Tony Bee
1,686 Points

Hi Michael, thanks for your reply.

I know that the purpose of the wrapper is to centre the content, but my question is why do we need to use a div element to do that?

Specifically in the video, why can't we write:

section, footer {
  margin: 0 auto;
}

to centre the section and footer, rather than wrapping the section and footer elements in a div and then writing:

#wrapper {
  margin: 0 auto;
}

Thanks for your help

Tony Bee
Tony Bee
1,686 Points
Tony Bee
Tony Bee
1,686 Points

Thank you Nick.