Susy columns are breaking

Question

I'm having some problems using Susy responsive grids. I'm trying to set up a two row, three column layout. Here is the code I'm using.

$susy: (
columns: 12,
gutters: 1/2,
math: fluid,
output: float,
gutter-position: inside,
);

$desktop:960px;

@include breakpoint($desktop){
body{
    @include container(95%);
    background: $faintgray;
}

.container {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

h2 {
    margin: 0 auto 13px auto
}

section {
    @include span(4);   
    text-align: center;
}

section:not(:first-of-type) {
    border-left: 1px dashed $lightgray;
}

}

And here is the HTML:

<div class="container">
<section id="frost">
    <h2>Frost Bank</h2>
    <p>Frost Bank founded in 1868 is based in San Antonio with over 110 financial centers across the state.</p>
    <a href="#" class="myButton"><i class="fa fa-search"></i>&nbsp;View</a>
</section>

<section id="shiner">
    <h2>Shiner</h2>
    <p>Spoetzl Brewery was founded in 1909 in Shiner, Texas. It's the oldest brewery in our Lone Star State.</p>
    <a href="#" class="myButton"><i class="fa fa-search"></i>&nbsp;View</a>
</section>

<section id="whataburger">
    <h2>Whataburger</h2>
    <p>Their first burger stand opened in 1950. They serve fresh food made daily, just like you like it.</p>
    <a href="#" class="myButton"><i class="fa fa-search"></i>&nbsp;View</a>
</section>  

<section id="costadelmar">
    <h2>Costa Del Mar</h2>  
    <p>Daytona Beach based Costa, specializes in polarized sunglasses for fishing, sailing, and surfing.</p>
    <a href="#" class="myButton"><i class="fa fa-search"></i>&nbsp;View</a>
</section>

<section id="honeysucklewhite">
    <h2>Costa Del Mar</h2>  
    <p>Daytona Beach based Costa, specializes in polarized sunglasses for fishing, sailing, and surfing.</p>
    <a href="#" class="myButton"><i class="fa fa-search"></i>&nbsp;View</a>
</section>

<section id="morestuff">
    <h2>More Stuff</h2>
    <p>Take a peek at all the other projects I've worked on. There's a some cool stuff here. Check it out!</p>
    <a href="#" class="myButton"><i class="fa fa-search"></i>&nbsp;View</a>
</section>   
</div>

There's two problems going in here.

Problem #1 At certain points in the browser width, the layout gets wonky and my rows are misaligned. At about 960px it's incorrect, then at 1000px it is corrent, then it happens again at 1020px, than corrects again. See photos:

Incorrect

Problem #2 When I add the vertical alignment to the container, The container centers vertically correctly, but the container shifts to the right about 10px so it's not centered horizontally. See photo.

Not Centered

Any help is greatly appreciated.

Answer 1

.container {position: absolute; for a responsive grid? That doesn't seem quite right to me, but I'm no great expert and I haven't transferred your html to my own editor.

Answer 2

1. Susy is using floats to lay out your grid. At certain widths the 3rd item in your grid is shorter than the others, and item #4 floats up underneath it. You need to add clear: left; to that 4th item, or use Susy's @include break; mixin to make that intended line-break explicit. Or, you might be best off replacing @include span(4) with @include gallery(4) . The gallery mixin is built to handle this type of layout automatically.

2. This is probably being caused by absolute positioning. Absolute positioning removes everything from the flow, and positions off the nearest positioned ancestor. In this case there is no positioned ancestor, so it's relative to the root of the document. I'm not sure exactly how that ends up working, but it's not what you want. You want to position off your body container, so you should add position: relative; there. But that container is collapsing around your now-absolutely-positioned content, so it has 0 height, and you are no longer vertically-centered. You'll have to fix that with explicit heights on both html and body :

    html, body { height: 100%; } body { position: relative; }