Question: I am using `Div` in my website to display some links. It works fine in IE, but when i expand that `div` in firefox and google chrome it goes weird. 

Can anybody help me to figure it out. I have googled it but i did not fine any useful solutions.

```
<td vAlign="top" align="center"><font>-</font></td>
<td align="left"  >
 <div align="left"  style="margin:0 auto; padding:0; display:block;clear:both; position:relative;">
  <A class="inkblue" href="javascript:expand(4);">Faculty &amp; Staff</A
 </div>
</td>
<td></td>
</tr>
<tr id="e4" style="DISPLAY: none">
<td></td>

```

This is the code for that section. Please let me know if anything required.

[This is the link to site](http://www.nu.edu.pk). open it in firefox or chrome and click the link 
"Faculty & Staff" under "Campuses" .

Answer: 
* Set the li elements to display:inline-block; and remove the float:left; (you could also remove the vertical-align, since that will only work on table-cell elements)
* Remove the fixed width from the wrapper.
* Add white-space:nowrap; to the ul
* And you should be fine...

(Except in <=ie7, but I suppose that's no problem in your case?)

```
#scroller li {
    display: inline-block;/* changed */
    /*float:left; */   /* deleted */
    padding: 0 10px;
    width: 120px;
    height: 100%;
    border-left: 1px solid #CCC;
    border-right: 1px solid white;
    background-color: #FAFAFA;
    font-size: 14px;
}
#scroller ul {
    list-style: none;
    display: block;
    float: left;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    text-align: left;
    white-space:nowrap; /* added */
}
#scroller {
    /* width: 8520px; */   /* deleted */
    height: 100%;
    float: left;
    padding: 0;
}

```
try this css code, it worked for me: `http://jsfiddle.net/manseuk/r9VL2/2/`

```
#wrapper {
                 z-index:1;

                width:100%;
                background:#aaa;
                overflow:auto;
            }

            #scroller {
               z-index:1;
            /*    -webkit-touch-callout:none;*/
                -webkit-tap-highlight-color:rgba(0,0,0,0);
                width:100%;
                padding:0;
            }

            #scroller ul {
                list-style:none;
                padding:0;
                margin:0;
                width:100%;
                text-align:left;
            }

            #scroller li 
            {
                background-color: White !important;
                padding:0 10px;
                height:40px;
                line-height:40px;
                border-bottom:1px solid #ccc;
                border-top:1px solid #fff;
                background-color:#fafafa;
                font-size:14px;
            }

```