HtmlService standalone webapp CSS caja display issue

Question

I've got some simple CSS here to display a sidebar for a webapp, however I am not able to get the two DIVs to display side by side. I've used a number of different CSS libraries that all have the same behaviour.

My guess is that caja is getting in the way, but I'm not sure.

Can anyone shed light on this, or maybe offer a solution? I was hoping to have a responsive design so that tablet/phone devices can also use this app.

Code.gs:

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate();
}
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

index.html:

<?!= include('css'); ?>
<div id="left">Side menu</div>
<div id="right">Scroll
    <br />Scroll
    <br />Scroll
</div>

css.html:

<style>
html, body {
    height: 100%;
    margin: 0;
    font-size: 20px;
}
#left {
    width: 20%;
    height: 100%;
    position: fixed;
    outline: 1px solid;
    background: red;
}
#right {
    width: 80%;
    height: auto;
    outline: 1px solid;
    position: absolute;
    right: 0;
    background: blue;
}
</style>

Answer 1

position: fixed CSS declaration is not allowed in HTML Service - it's one of documented restrictions. I personally find it a silly restriction, but who am I to argue with Google... :)

A possible work-around could be something like this:

index.html

<?!= include('css'); ?>
<div id="container">
  <div id="left">Side menu</div>
  <div id="right">Scroll
      <br />Scroll
      <br />Scroll
  </div>
</div>

css.html

<style>
html, body {
    height: 100%;
    margin: 0;
    font-size: 20px;
}
#container {
  position: relative;
  height: 100%;
  width: 100%;
}
#left {
    width: 20%;
    height: 100%;
    position: absolute;
    left: 0;
    background: red;
}
#right {
    width: 80%;
    height: 100%;
    position: absolute;
    right: 0;
    background: blue;
    overflow-y: scroll;
}
</style>

That will give you 2 columns, with only right one scrollable (if content exceeds screen height).