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.
hmm a bit cludgy - but this seems to work, it does require nesting the list (second 3 links in separate list) and a span for the "home" link, theory is that you need the first link to float, width: 100px, then you need the second group not to float and have their overflow hidden so the group take up the remaining space.. then you float the 3 links @ 33% inside the non-floated container

### Example : [HERE](http://jsfiddle.net/clairesuzy/FxXDQ/)

**CSS:**

```
div {
width: 90%;
margin: 0 auto;
}

ul {
margin: 0; padding: 0; list-style: none; /* reset */
float: left;
width: 100%;
}

li {
float: left; 
width: 100%; 
text-align: center;
}

li span {
float: left; 
width: 99px; 
background: #eee; 
border-right: 1px solid #000;
}

ul ul {
float: none; 
overflow: hidden; 
width: auto;
}

li li {
width: 33%; 
background: #ffe; 
border-right: 1px solid #000;
}

```

**HTML:**

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

```