CODEWITHSUNDEEP
csssassflexboxgrid-layoutsusy-sass
TetraDev
TetraDev

Reputation: 17124

Susy Grid 2 / Grid Floats: How to verticle align bottom on a floated element?

Lets say I have a simple floated grid, made with susy (or anything else). How do I make the contents of one of the columns stick to the bottom of that column?

I tried verticle-align, align-items, and other combos, but no luck. And since it is made with floats, any time I put flexbox on it, it kills the layout of my buttons since they have an icon floated to the right.

What are some correct ways to do this? Here's my HTML:

<div class="col s2 action-buttons_container">
  <button class="btn waves-effect waves-light action-button" type="submit" name="action">Hold Ticket <i class="material-icons right">pause</i></button>
  <button class="btn waves-effect waves-light action-button" type="submit" name="action">Resolve Ticket <i class="material-icons right">check</i></button>
</div> <!--end .col.s2-->

.col has float:left applied automatically which cannot be removed.

CSS I tried

   .action-buttons_container {
       position: absolute;
    }
   .action-button {
      position: relative;
      bottom: 0;
   }

Image of my layout enter image description here

Thanks for the help.

Upvotes: 0

Views: 372

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

The simple answer is you can't, though it's maybe a bit misleading. There are ways to make it happen, but not using floats on their own. The vertical-align property only changes the alignment of items relative to inline flow, align-items only works with flexbox.

Flexbox might be a great option, and could replace floats (even using Susy). Instead of using Susy's span mixin, use flexbox with the span function for flex-basis e.g flex-basis: span(3 of 12).

Your absolute positioning could also work. You'll want position: relative set on the overall container (which you did not include HTML for), and then something like this:

.action-buttons_container {
  position: absolute;
  bottom: 0;
  right: 0;
  width: span(3 of 12);
}

That might need some minor adjustments depending on the grid details you didn't include.

Upvotes: 0

Related Questions