Susy center content within full div width
I want to center the content in a div while allowing the div to take the full width of the screen. I have a background image in a header that repeats x and should stretch the full length of the screen when centering the content inside. I know that I can add a div like the container seen in my example below, but that will add a lot of non-null markup to the html. The susy container is added to the shell 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 additional inner divs. If it was just a header, that would be fine, but my markup would require it in many places. In the end it will look like any css grid.
source to share
You have several options that will work. Indeed, any solution you can find in CSS you can use Susie to help you. There's nothing special about the Susy container, which is no different from writing CSS. Suzie is just doing the math for you.
The most reliable / obvious approach requires 1 wrapper, but your element <header>
will serve that role just fine, and you don't need an extra div in addition to your container and header:
<header>
<div class="container">
content...
</div>
</header>
Another approach I have used is to create a full page background with generated content (using only the header). This requires either knowing the height of your heading:
header {
@include container;
&:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 6em; // the height of your header.
}
}
or set 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;
}
}
It 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 it) and you can't figure out how to make it work with Susy, I'll be happy to show you.
source to share