Question: I have 3 divs within a container with each of their widths set at 100%. if I float them all left they will stack on top of each other. What I would like for them to do is float next to each other horizontally. Changing the width of the div to a fixed width works fine. How can I achieve this? Thank you for your help and time.

html

```
<div id="scroller">
  <div id="slide-container">
    <div class="slide" style="background-color:yellow;">
    </div>

    <div class="slide" style="background-color:orange;">
    </div>

    <div class="slide" style="background-color:red;">
    </div>

  </div>
</div>

```

css

```
body, html {
  margin:0;
  padding:0;
}

#scroller {
  min-width:100%;
  height:400px;
  background-color:blue;
  position:relative;
  overflow:hidden;
}

#slide-container {
  height:100%;
  position:relative;
  left:0;
  white-space:nowrap;
  font-size:0;
}

.slide {
  height:100%;
  width:100%;    
  margin:0;
  padding:0;
  float:left;
}

```

<https://codepen.io/justinhdevelopment/pen/bGexaJy> codepen example of problem

Answer: 
I created a utility function to test an empty function as suggested in comments using `Function.prototype.toString()`

```js
function isEmpty(f) {
    // Get content between first { and last }
    const m = f.toString().match(/\{([\s\S]*)\}/m);
    // Strip comments
    const l = m && m[1].replace(/^\s*\/\/.*$/mg, '').trim();
    if (l.length === 0) {
        return true;
    } else {
        return false;
    }
};

function doSeatMouseClick(_event, _seat) { 
 //do nothing, read only
}

var bool = isEmpty(doSeatMouseClick);
console.log(bool)
```
use the same reference to the same empty function.
var emptyFunction = function {};
and then use
vm.emptyFunction = angular.isFunction(callback) ? callback : emptyFunction;
Then test
expect(vm.emptyFunction).toEqual(emptyFunction);