title: Making the content adapt when changing the screen size
body: <p>I'm creating a website which needs to be responsive, no problem here as I know how that's being done, but I also need to change the display based on the size of the screen, and this must be done dynamiccly and thus I cannot use media queries (I think).</p>
  
  <p>I'm open to all options: pure css, html, javascript, jQuery, ...</p>
  
  <p>I have a website which looks like the the following:
  <img src="https://i.stack.imgur.com/F6mXN.png" alt="enter image description here"></p>
  
  <p>This is looking already good, now, when I resize the window to make it smaller, the background will dissapear, and this is achieved based on a CSS3 media query:</p>
  
  <pre><code>#OfficeUI { min-height: 52px; background: url('../Images/Application/Backgrounds/Circuit.png') no-repeat scroll right top rgba(0, 0, 0, 0); color: #444; font-family: 'Segoe UI'; font-size: 0.75em; overflow: hidden; }
  
  @media screen and (max-width: 497px) {
  
      #OfficeUI { background-image: none; }
  }
  </code></pre>
  
  <p>So far, so good, but now the real problem does show up.
  When I resize the window to a very small portion of what it is right now, the website does behave like this:</p>
  
  <p><img src="https://i.stack.imgur.com/msR3E.png" alt="enter image description here"></p>
  
  <p>In this particular case, the text 'Inbox - user...' is moving over the icons. What I would like to have here is that the area of the icons is made smaller, meaning that the most right icon will not be showed anymore. If I further resize the window, the area can shrink again so again an icon is removed.</p>
  
  <p>But the problem here is that I don't have any control over the content which is displayed, there might be 6 icons and there might a very long title, or vice versa.</p>
  
  <p>The only idea I can up with, not implemented in a solution is the following (jQuery):</p>
  
  <ol>
  <li>Calculate the width of the Window.</li>
  <li>Calculate the width of the title area.</li>
  <li>Calculate the width of the icons area.</li>
  </ol>
  
  <p>On resizing the window, I would implement them something like this:</p>
  
  <ol>
  <li>If the size of the icons area and the size of the title area is larger than the window size, then shrink the icons area with a specified amount of pixels (predefined) so that 1 image is removed and repeat that on every resize.</li>
  </ol>
  
  <p>The only problem that I do have with this solution is that the website will grow a lot and performing all those kind of calulcations on every window resize might not be best-practice.</p>
  
  <p>I'm a bit affraid that the website will become very laggy.</p>
  
  <p><strong>[EDIT]: I've added a snippet with the current code.</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* General styling that can be applied to all the elements. */
  .no-margin { margin: 0px; }
  .no-padding { padding: 0px; }
  
  /* General styling for the root of the website. */
  #OfficeUI { min-height: 52px; background: url('../Images/Application/Backgrounds/Circuit.png') no-repeat scroll right top rgba(0, 0, 0, 0); color: #444; font-family: 'Segoe UI'; font-size: 0.75em; overflow: hidden; }
  
  /* General styling that can be applied to all kind of elements inside the OfficeUI container. */
  #OfficeUI .center { text-align: center; }
  #OfficeUI .absolute { position: absolute; }
  
  /* Container elements. */
  #OfficeUI .container { display: inline-block; }
  #OfficeUI .container-full-width { width: 100%; }
  
  /* Styling for the OfficeUI elements itself. */
  #OfficeUI .application-title { margin: 6px 3px 0px 0px; }
  #OfficeUI .application-icons img { margin: 3px 1px 0px 4px; }
  #OfficeUI .application-icons img:first-child { margin: 3px 0px 0px 7px; }
  #OfficeUI .application-icons img:hover:not(:first-child) { background-color: #cde6f7; }
  
  /* Provide some responsive styling. 
     The following styling is applied to the screen when the width of the window is less than 497px. */
  @media screen and (max-width: 497px) {
      
      /* Hide the background image when the size of the screen is smaller than the size of the background-image. */
      #OfficeUI { background-image: none; }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Defines the main content area for the website. --&gt;
      &lt;body class="no-margin no-padding"&gt;
          &lt;!-- Provides the main OfficeUI area. --&gt;
          &lt;div id="OfficeUI"&gt;
              
              &lt;!-- Defines the header itself. --&gt;
              &lt;header&gt;
                  
                  &lt;!-- Provides the area in which the application icons are being showed. --&gt;
                  &lt;div class="absolute"&gt;
                      &lt;div class="container application-icons"&gt;
                          &lt;img src="Resources/Images/Application/Application.png"/&gt;
                          &lt;img src="Resources/Images/Application/Send-Receive.png"/&gt;
                          &lt;img src="Resources/Images/Application/Undo.png"/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  
                  &lt;!-- Provides the area in which the application title is being rendered. --&gt;
                  &lt;div class="container container-full-width center"&gt;
                      &lt;div class="application-title"&gt;Inbox - user@github.com - Outlook&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/header&gt;
          &lt;/div&gt;
      &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When the window is resized, I would like to see something like:</p>
  
  <p><img src="https://i.stack.imgur.com/366Sj.png" alt="enter image description here"></p>
  
  <p>Any toughts on this?</p>
  
  <p>Kind regards,</p>