Question: I have a row of `<div>`s that will be buttons. I mimic some actual behaviour with the background. Works quite nicely. The problem is that the outer `<div>` (the row) doesn't shrinkwrap and so the border of the fieldset is also to wide. see here: <http://jsfiddle.net/L99VY/>

I also think I did something weird with using

```
div.button {
    display: table-cell;
    ...
}

```

If I try something else, like `display-inline` or `float:left`, It also affects the way the text is presented on the button. Is the shrinkwrap problem related to this?

If you open the fiddle in IE11 or latest FF you see how I want it (except for the background image).

Any suggestions?

Answer: 
Add `display: inline;` to `fieldset`, the border is on the `fieldset`. You could use `inline-block` as well, [but IE7 or older](http://caniuse.com/inline-block) doesn't play nice with it.

`[**jsFiddle**](http://jsfiddle.net/L99VY/2/)`

You should have a look at [this answer on SO](https://stackoverflow.com/a/5251088/1846192) for an explanation as to why the width of your `fieldset` (the block-level element in this case) automatically expands to the width of its parent container.
You may add "display" rule to fieldset.
For example:

```
        fieldset {
            display: inline-block;
        }

```

Why you don't use display:table-row and display:inline-table? They would make the same effect as inline-block, but would be more apropriate.