Not understanding how width's work

Question

I am trying to make a simple banner just for practice and for some strange reason idk why i have to keep adjusting the width of every single <div> class. Can someone explain to me how come i have to keep adjusting the width of each one in order to just arrange them the way i want them on the page?. Like all of my content i thought would center in the center of the page when i did body { width: 100%; margin: 0 auto;} but instead nothing happened until i set up the child div elements like this.

CSS

body { width:100%; margin: 0 auto;

}

.container { width:200px; margin:0 auto; }

.header { background: steelblue; width:100%; top:0; position: fixed; }

HTML

        <div class="container">

            <div class="logo">
                <h1>Reggie Sibley</h1>
                <h2>Coding Advocate</h2>
            </div>

            <div class="nav">
                <ul>
                    <li><a href="#">About Me</li>
                    <li><a href="#">Pictures</li>
                    <li><a href="#">Videos</li>
                    <li><a href="#">Contacts</li>
                </ul>
            </div>

            <div class="banner">

            </div>

        </div>

    </div>

</body>

Please someone explain to me how to properly use div's and there widths because its just not clicking for me for some reason, what am i doing wrong?

Answer 1 · 2014-12-18T14:19:54Z

December 18, 2014 2:19pm

Hi Reggie,

Like all of my content i thought would center in the center of the page when i did body { width: 100%; margin: 0 auto;}

After giving the body a width of 100%, the content will span the entirety of the viewport.

margin: 0 auto; will set top and bottom margins to 0 and then set the remaining left an right margins to equal values. As you do not have any left and right margins (because the body spans the full width), they will be set to 0 also. Therefor, margin: 0 auto is not needed on the body tag. The width: 100% property is not needed for this example, but is a best practice. Keep that in.

So far we have:

body { width: 100% }

The reason I said the width isn't needed is because the body element, like the div element, has a display: block property set by default. That means it will span horizontally as much as it's allowed.

Keeping that in mind, for us to get centered content on a web-page we need to use a container div placed inside the body element. This will span the full width. Giving it a fixed width and a margin of 0 auto will center it inside the body by giving it equal margins left and right.

body { width: 100% }
.container { width: 90em; margin: 0 auto; }

The header doesn't need any width and margins to act like a header does. It just needs to be inside the .container div. It will span the whole width of the container and take up as much height as it has content.

Hope that clears things up, Cosmin

Welcome to the Treehouse Community

Looking to learn something new?

Reggie Sibley

Reggie Sibley

Not understanding how width's work

1 Answer

Cosmin Cioaclă

Cosmin Cioaclă