Q: set div height; inner span text centering 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.


    .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%;
    }
    <div class = "grid-cart-message">
     <div class="grid-max">
      <div id="messages-cart-view">
       <ul class="messages">
        <li class="success-msg">
         <ul>
          <li>
           <span>Here is some text that is dynamically assigned.</span>
          </li>
         </ul>
        </li>
       </ul>
      </div>
     </div>
    </div>



A: try this
since you added margin you faced that problem


.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;
        
        text-shadow: 0 -0.1em #666;
    }
    .grid-cart-message #messages-cart-view {
        float: left;
        margin: 0 1%;
        width: 98%;
    }
    <div class = "grid-cart-message">
     <div class="grid-max">
      <div id="messages-cart-view">
       <ul class="messages">
        <li class="success-msg">
         <ul>
          <li>
           <span>Here is some text that is dynamically assigned.</span>
          </li>
         </ul>
        </li>
       </ul>
      </div>
     </div>
    </div>



A: Also text-centering try this:


.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;
  font-weight: bold;
  text-shadow: 0 -0.1em #666;
}
.grid-cart-message #messages-cart-view {
  float: left;
  margin: 0 1%;
  width: 98%;
}
.list {
  text-align: center;
}
 <div class = "grid-cart-message">
     <div class="grid-max">
      <div id="messages-cart-view">
       <ul class="messages">
        <li class="success-msg">
         <ul>
          <li class="list">
           <span>Here is some text that is dynamically assigned.</span>
          </li>
         </ul>
        </li>
       </ul>
      </div>
     </div>
    </div>


