We’ll only touch on this topic slightly in this article since we’ll cover it in more detail later when we start designing our responsive web pages.

CSS — P8: Box Model

Understanding the box model is a necessity before reading this article. When designing appealing, responsive websites, most of time you’ll want each section to span across the entire page. Let’s look at an example of a website whose header spans across the entire page.

If we examine the page, the navigation and the main content span across the entire width of the screen. They are both centered, and the background of the website is gray. We won’t replicate this web page, but we will create content that stays in the middle but whose background spans across the entire page.

We’ll start by creating the section in HTML and adding a light gray background color to the section.

<section>
    The text in this container will be centered.
    The container will have a light-gray background
    color that will expand across the entire page.
</section>
/* CSS */
section { background-color: lightgray; }

The text is aligned to the left, but we need it center aligned. We could try adding padding and pushing the contents towards the center, but the easy way to do this is with the margin and the width properties. Let’s see what happens if we apply those properties to the current container.

section {
    background-color: lightgray;
    width: 350px;
    margin: 0 auto;
}

The container is centered on the screen, but the background color does not extend all the way to the left or the right of the screen. Specifying a margin of 0 for the top and bottom and auto for the left and right sides should extend the background color to the left and right edges. If we remember the box model, the background color is applied only to the content inside the border box. To get around this, we simply add an additional container inside the current one and apply the margin and width properties to it. The outer container will hold the background-color property. We will use a div container to apply this stylistic change.

<section>
    <div class="wrapper">
        The text in this container will be centered.
        The container will have a light-gray background
        color that will expand across the entire page.
    </div>
</section>
/* CSS */
section { background-color: lightgray; }
.wrapper {
    width: 350px;
    margin: 0 auto;
}

Try to understand what just happened. We set the width of the wrapper div to 350px. We set the left and right margins to auto which fills the width of the outer container. An equal margin is applied to the left and right portion of the content pushing it to the middle. Since the outer container has a background color of light gray, the color spans the entire width of the browser. Once we get into bootstrap, there are even easier ways to accomplish this.

The next modification that we’ll make is changing the width property to max-width. If the width of the inner container is set to a value that’s larger than browser window, it will extend past the right side. You will get a scroll bar at the bottom of your screen. Unfortunately, the outer container has a fixed width that extends from the left browser edge to the right browser edge. Using the scroll bar will display the content, but the background will not cover that portion. Let’s modify the code from before to show this example.

section { background-color: lightgray; }
.wrapper {
    width: 600px;
    margin: 0 auto;
}

Even without scrolling over, you can already see that the background is cutting off. Scrolling over to the right will display the full effect.

If we change the width property to the max-width property, our problem disappears.

section { background-color: lightgray; }
.wrapper {
    max-width: 600px;
    margin: 0 auto;
}

If you look at the screen above, the background color does not truly extend to the left or the right of the browser. Same goes for the top and bottom. Let’s try removing the margin property from the section container to see what happens.

section {
    background-color: lightgray;
    margin: 0 auto;
}
.wrapper {
    max-width: 600px;
    margin: 0 auto;
}

We still get margin. If removing the section margin didn’t solve it, then what could be causing this extra margin? It turns out that the <body> tag has an inherent margin that we need to remove. We can remove the margin property from the section tag and apply it to the body tag.

body { margin: 0; }
section { background-color: lightgray; }
.wrapper {
    max-width: 600px;
    margin: 0 auto;
}