Question: I'm building a site for mobile devices and therefore has a fluid layout.
My navigation list looks like this:

```
<ul>
     <li>home</li>
     <li>about</li>
     <li>work</li>
     <li>contact</li>
</ul>

```

Problem is, the first list item needs to be 100px only (left aligned always), and the other 3 split evenly, therefore is it possible to have even width for all list items except for the first one (without using javascript).

Answer: 
This is the simplest way I could think of:

```
ul { overflow: hidden; padding-left: 100px; position: relative; }
li { width: 33.33%; float: left; }
li:first-child { position: absolute; top: 0; left: 0; width: 100px; }

```

The main idea is taking the first `li` out of the flow (`position: absolute`) and adding a padding-left to the `ul` (space for the first `li`). Now if we set the percentage width for the other `li`s, they will take up the remaining space.

And here is a [**jsFiddle Demo**](http://jsfiddle.net/SSVc8/). I added a red border on the `ul` which shows that because of the percentages `li`s will not accurately fill it.

I am unsure what mobile browsers you want to support, but except `:first-child` (which can be worked around by adding a class on the first list item) I assume they must support everything I used.
For what it's worth, this was what I was thinking of when I made my comment on your question:

<http://jsfiddle.net/4t9fV/>

```
ul {
    display: table;
    width: 100%;
    background: #ccc;
    table-layout: fixed
}
li {
    display: table-cell;
    text-align: center;
    outline: 1px dashed red
}
li:first-child {
    width: 100px
}

```