CODEWITHSUNDEEP
susy-compass
aaronb
aaronb

Reputation: 41

Susy center content within a full width div

I want to center content within a div while allowing the div to assume the full width of the screen. I have a background image in the header that repeats x and must stretch the full length of the screen while centering the content within. I know I can add a div as a container seen in my example below, but that would add alot of non semantic markup to the html. The susy container include is added to the wrapper in my project.

<body>
  <div class="wrapper">
    <header>
      <div class="container">
         centered content goes here...
      </div>
    <header>
  </div>
<body>

Is there a way to do this with Susy without the need for extra inner container div's. If it was just the header that would be fine but my markup would require this in many places. In the end it would look like any css grid framework.

Upvotes: 3

Views: 3216

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

You have several options that will work. Really, any solution you can find in CSS, you can use Susy to help you with. There's nothing special about the Susy container that makes it any different from writing the CSS yourself. Susy just does the math for you.

The most robust/obvious approach does require 1 wrapper, but your <header> element will serve that role just fine, and you don't need the extra div in addition to your container and header:

<header>
  <div class="container">
    content...
  </div>
</header>

Another approach that I have used is to create the full-page background with generated content (using just the header). This requires either knowing the height of your header:

header {
  @include container;
  &:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 6em; // the height of your header.
  }
}

or setting overflow-x to hidden on your body:

body { overflow-x: hidden; }

header {
  @include container;
  position: relative;
  &:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

That may also require some z-index adjustments to work properly.

If you find another css/html approach that you like better (I'd love to see one), and you can't figure out how to make it work with Susy, I'll be happy to show you.

Upvotes: 2

Related Questions