Debugging Containers / Wrappers

What are Containers / Wrappers?

Containers / Wrappers are simply a div that is used to center content on the screen using a touch of CSS.

Not to be confused with container queries.

This is something that you will apply to the vast majority (if not all) of pages that you will work on.

Setting the scene:

Our code isn't overly complicated: Our wrapper div, a h1and some placeholder paragraph text p

<div class="wrapper">
  <h1>This is a wrapper</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, earum itaque? Similique, facilis ea rerum maiores, minus dolor ullam illum voluptate eum, laudantium quis consequatur voluptatem. Ullam at unde laboriosam aliquid nobis dolorem natus explicabo ad vero. Quisquam, fuga sit! Deserunt, aut. Accusamus similique earum tenetur eaque alias, sapiente adipisci molestias amet cupiditate distinctio, corporis reiciendis perferendis repellat reprehenderit ab eligendi in et. Laborum numquam deleniti possimus blanditiis error quia ipsam aliquid similique, illo neque perferendis laudantium necessitatibus, magni culpa odit vero itaque porro distinctio? Corrupti, sed ipsa. Illo quae neque praesentium aut enim qui, nobis ea at explicabo? Eligendi.</p>
</div>

The CSS Code:

* {
  /*   resetting margin and padding */
  margin: 0;
  padding: 0;
}

h1,
p {
  /*  adding some whitespace to elements  */
  margin-top: 16px;
}

Codepen Link

Comparing the 2 examples you can see the difference that the wrapper is making.

Background:

Since the wrapper is just a div from previous lessons we know that a div is a block level element.

Since it's a block level element, we know 2 things.

• The width of element naturally wants to be as wide as possible.
• The height of the element naturally wants to be a small as possible.

So if we Google "How to center a wrapper" you'll undoubtedly find the answer margin: 0 auto;

margin: 0 auto; is a shorthand for margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto;

Great we have an answer so lets apply this to our CSS.... And nothing changes.

Why?

Well to see what's going on lets put a background-color on the wrapper

Adding a temporary background-color to your elements is going to be your most used troubleshooting technique.

Codepen Link

A few reasons for this.

1. margins push outwards and create whitespace. (see the white at the above the red background, this is due to margin-top)
2. the div is a block level element.

Since the div is already the full width of the screen there's no space for the margin to push the div to center.

Fix:

So we need to make the div smaller than the screen. Setting widths in CSS can be tricky.

.wrapper {
  width: calc(100% - 2rem);
  max-width: 1500px;
}

Breaking down each line:

1. We are targeting the div with a class "wrapper"
2. We are using CSS the calculate the width of screen and we're then taking space away from the width.

Since we're setting a relative width 100% of the screen minus 3rem (48 pixels) so on desktops and larger monitors the content will over stretch.

3. max-width fixes this as it doesn't allow the div to be bigger than 1500px so on larger monitors this won't span 100% minus the 3rem

Codepen Link

Now that the div is smaller than the screen the content can be centered by pushing against the left and right edges of the screen to center the wrapper, using auto allows CSS the automatically calculate this space.

Updated code:

.wrapper {
  width: calc(100% - 2rem);
  max-width: 1500px;
  margin-inline: auto;
}

There is another way to achieve the exact same result, but this might be confusing at the beginning.

All the min is doing is choosing the smaller of the 2 values. So if the pixel value of 100% - 2rem is greater than 1500px then the wrapper will not be bigger than 1500 pixels.

.wrapper {
    width: min(100% - 2rem, 1500px);
    margin-inline: auto;
}

End result:

Codepen Link

Notes: the 2rem and 1500px values can be adjusted, this is just my preference.

1rem is usually a base 16px, so 2rem would be 32px and 3rem is 48px. This is then halved when using margin-inline:auto; so the space on either side of the div should be 16px whitespace left, and 16px whitespace right.