Question: I have a set of 8 buttons in a horizontal row. How can i make them like the buttons in [www.dotacinema.com](http://www.dotacinema.com) where when you smaller the window the buttons go together too (or zoom in, the buttons are still visible)

Thanks

EDIT:

```
    height: 38px;
float: left;
min-width: 60px;
max-width: 140px;
display: inline-block;
width: 12.5%;
background-image: url(button.jpg);
background-size: 100%;
color: white;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #d0d0d0;
border: outset #555 1.5px;
cursor: pointer;
text-align: center;
font-size: 16px;

```

does not make the buttons squish together for some reason. Pls help.

Answer: 
Make the width of the buttons a percentage of the page, and then set a minimum button width using `min-width: ;` to stop them getting any smaller than readable.

<http://jsfiddle.net/s2VvX/3/>
What they did on the site you provided is change the `ul` into a table using CSS, where each `li` is a table-cell which causes it to automatically adjust the width of the `li`s to fill the `ul`.

You can find out more by using the [Chrome Developer Tools](https://developers.google.com/chrome-developer-tools/).

Note that it's also possible using `text-align: justify`, which is demonstrated here: <http://jsfiddle.net/2kRJv/>