title: set div height; inner span text centering
body: <p>so, when I assign a height to either the grid-cart-message or the messages-cart-view sections the inner span text does not center accordingly.  It is cut off within the div.  Any possible way to overcome this?  Thx.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .grid-cart-message {
          background: none repeat scroll 0 0 #05b1eb;
          overflow: hidden;
      }
      
      .grid-cart-message #messages-cart-view .error-msg span, .grid-cart-message #messages-cart-view .success-msg span {
          color: #fff;
          display: block;
          float: left;
          font-weight: bold;
          margin: 1em 0 1em 1em;
          text-shadow: 0 -0.1em #666;
      }
      .grid-cart-message #messages-cart-view {
          float: left;
          margin: 0 1%;
          width: 98%;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class = "grid-cart-message"&gt;
       &lt;div class="grid-max"&gt;
        &lt;div id="messages-cart-view"&gt;
         &lt;ul class="messages"&gt;
          &lt;li class="success-msg"&gt;
           &lt;ul&gt;
            &lt;li&gt;
             &lt;span&gt;Here is some text that is dynamically assigned.&lt;/span&gt;
            &lt;/li&gt;
           &lt;/ul&gt;
          &lt;/li&gt;
         &lt;/ul&gt;
        &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>