title: Creating a GUI like interface using html
body: <p>I am trying to create a resizable html page that mimics the java applet clock layout and am not sure if I am approaching this in the right way.  This 3 clock picture below is what I am trying to create now.  Currently I used div, margins, padding to lay out a 1 clock using css but since the font-size are all different per line I am used the vmin font to handle the auto-resizing; but with mixed results.  I have being looking online for a tutorial or examples that would address how to do this problem without success since the examples are resizing text paragraphs that are the same font-size throughout or images.</p>
  
  <p>Does anyone know of a tutorial site or example that addresses this type of problem?  Maybe I should be doing this using canvas or something instead of div tags.   Thanks.</p>
  
  <p><a href="https://i.stack.imgur.com/D7hyT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D7hyT.png" alt="three clocks"></a></p>
  
  <p>This was my 1 clock page (minus all the css stuff):</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"/&gt;
      &lt;meta name="description" content="AOS/LOS Clock" /&gt;
      &lt;title&gt;AOS/LOS Clock&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/mc_style.css" /&gt;
      &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
      &lt;script type=\"text/javascript\" src=\"js/mc_clocks.js?color=00ff00&amp;file=input/aos_times_json;\"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/mc_engine.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body id="body"&gt;
      &lt;div id="wrapper"&gt;
        &lt;div id="clockAOS" class="clock missionColor"&gt;&lt;/div&gt;
        &lt;div class="title missionColor"&gt;&lt;span&gt;Acquisition of Signal&lt;/span&gt;&lt;/div&gt;
        &lt;div id="relay" class="siteTdrs"&gt;&lt;/div&gt;
        &lt;div id="clockLOS" class="clock missionColor"&gt;&lt;/div&gt;
        &lt;div class="title missionColor"&gt;&lt;span&gt;Loss of Signal&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;p id="Msgs"&gt;&lt;/p&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>