title: How to align Material Design Lite cards to right hand side
body: <p>I'm trying to build a simple page which have cards using material design lite components but one problem stucks the whole layout of the page. How to align the 
  <strong>mdl card</strong> to right hand side of the screen ? I have tried by <strong>float:right;</strong> in css then the card is only shifting towards right in that same col not to the screen. Help me to shift it</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="mdl-cell mdl-cell--6-col"&gt;
      &lt;div class="demo-card-wide mdl-card mdl-shadow--2dp"&gt;
          &lt;div class="mdl-card__title"&gt;
              &lt;h2 class="mdl-card__title-text"&gt;Welcome&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div class="mdl-card__supporting-text"&gt;
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Mauris sagittis pellentesque lacus eleifend lacinia...
          &lt;/div&gt;
          &lt;div class="mdl-card__actions mdl-card--border"&gt;
              &lt;a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"&gt;
                  Get Started
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="mdl-card__menu"&gt;
              &lt;button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"&gt;
                  &lt;i class="material-icons"&gt;share&lt;/i&gt;
              &lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>