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 |
+--------------------+
Assuming that following is your html
You can simply style your CSS as following
Above code should work across browsers (I have not tested this across browsers)
Use
display: inline-block
instead offloat
: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.http://css-tricks.com/what-is-vertical-align/ This link might help, alternatively you could create the result as table based content with the content aligned to the bottom of each cell.