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 CSS Layout Basics CSS Layout Project Creating and Styling the Layout Containers

Posted by Justin Baird
Justin Baird
16,238 Points

One div for .container vs. multiple .container divs?

I tried using one "wrapper" div from the header to right before the footer to style the width, however this didn't work and only adjusted the header's width. It only works when using the same class div (.container) for each section (header, column). Why doesn't one main div not adjust the width of all sections?

Luke Pettway
Luke Pettway
16,593 Points

As long as the main div wraps all of your content, it should resize everything inside of it. Can you post your markup? Sometimes that happens when there is a missing closing or opening tag somewhere.

2 Answers

johannaho
johannaho
4,150 Points
johannaho
johannaho
4,150 Points

Maybe you should look in the browser (development tools) which rules are applied to all the div's or other elements. Just to make sure there isn't another rule for the div, section or column that overrides the css rules of your wrapper.

Justin Baird
Justin Baird
16,238 Points
Justin Baird
Justin Baird
16,238 Points

Thanks for the responses! I checked the developer tools as well and the result is expected - that the elements after the header aren't picked up by the css if div is one. The code is a bit long so I'm hesitant to post in here. But the files are zipped in a project here: https://teamtreehouse.com/library/css-layout-basics/css-layout-project/introducing-the-project

The files are in the start folder.

Here is the CSS: '''/* ---- Layout Containers ---- */ .container { margin: 10%; }'''

If I put the .container div under the header as Guil does, and the closing div right before the footer, it only moves the .name and .main-nav:

'''<header class="main-header"> <div class="container">'''

If I put the .container div BEFORE the header and closing before the footer, it will adjust the margin of everything, however this includes the .banner which is unwanted. The banner should expand to 100%.

In the solution video, Guil uses a separate .container div for each main section, which works great. It has to be a conflict somewhere I'm just trying to figure out the logic. I tried using a width of 90% or margin of 10% to try and see what works or doesn't work.