How can I positioning LI elements to the bottom of UL list

Question

I have menu items like: Row1 Row2.. RowN and I want them not to be that wide - that's why including breaks (with max-width)

I have this HTML:

<div>
 <ul>
  <li>Row1</li>
  <li>Row1 Row2 Row3</li>
  <li>Row1</li>
  <li>Row1 Row 2</li>
 </ul>
</div>

with this CSS:

/* MENU */

.menudiv {padding-left:10px; border-bottom: 1px solid #d0db88;}

ul.menu
{                 
    list-style-type: none;
    min-width: 1050px;
    position: relative;
    left:10px;
    display: block;
    height: 45px;       
    margin: 0;
    padding: 0;
}

ul.menu li
{    
    float: left;
    margin: 0;
    padding: 0;
}

ul.menu li a
{    
    float: left;    
    text-decoration: none;
    padding: 9px 12px 0;
    font-weight: bold;
    max-width:130px;
}

Actual:

+--------------------+
|Row1 Row1 Row1 Row1 |
|     Row2      Row2 |
|     Row3           |
+--------------------+

What I need:

+--------------------+
|     Row1           |
|     Row2      Row1 |
|Row1 Row3 Row1 Row2 |
+--------------------+

Answer 1

Use display: inline-block instead of float:

ul.menu
{                 
   vertical-align: bottom;
}

ul.menu li
{    
   display: inline-block;
   text-align: center;
}

EDIT: Added text-align: center;. If I understand your comment correctly, that is what you want. If not, you'll need to be more specific.