Centered half / golden-small / one-third / etc ?

[darkguy2008]

Hey :)

This library is great! however I'm facing a small problem I can't find out why it doesn't work. Take in example this code:

<section class="login">

    <div class="grid">
        <div class="unit whole align-center">
            <div class="grid">
                <div class="unit golden-small">
                    Random Text, Login controls should come here and such
                </div>
            </div>
        </div>
    </div>

</section>

As you can see, I'm trying to have a centered, small login form horizontally centered in my page, and it doesn't work, it ends up aligned to the left - I assume it's because .grid has float:left, but it does nothing anyways if I remove it.

Any ideas? Thanks in advance :)

[cobyism]

The .align-center will only work on inline content, not block-level or floated content (such as .grids and .units), which is why it probably isn’t doing what you expect. If I’ve understood what you’re trying to do, there’s a couple of ways you could accomplish this.

You could use a .one-third .unit with an empty .one-third .unit before it (to bump the second one over into the middle), but using empty divs as a way to make your layout work isn’t great.

The way I’d do it is use a .whole .unit, and write your own wrapper class to restrict the .grid’s max-width for just that particular section:

HTML:

<section class="login">
  <div class="grid">
    <div class="unit whole">
      LOGIN FORM
    </div>
  </div>
</section>

CSS:

.login .grid {
  max-width: 33%;
}

That way you have complete control. Would that approach work for what you need to do?