title: How can I create a responsive web page layout with 'display:inline-block'?
body: <p>I want to create a simple responsive web page from scratch, just one html and one css file. This was intended as a short exercise, but it turned out that I underestimated the complexity. </p>
  
  <p>The layout is simple. A header, main, sidebar and footer. Sidebar should have a fixed width and the main content should use the rest of the horizontal space. The sidebar should disappear if the screen width is below 480px. A menu icon is not even planned yet; I only want the sidebar to disappear and the main content to use 100% of the space subsequently.</p>
  
  <p>After I gave up with floating divs, I started to read a lot about using display:inline-block for this purpose. For instance <a href="http://learnlayout.com/inline-block-layout.html" rel="nofollow">here</a>. This seems to work much better than float, but there are  some issues I can not solve.</p>
  
  <ul>
  <li><p>In a large window it works fine now. But if I resize the window to a smaller size, the layout starts to break. I know that is because the sidebar is fixed, but the main is in percentage. Therefore, when the window gets smaller, the space that is left for the sidebar decreases, too. How can I "tell" the main div to always "fill the rest of the space"?</p></li>
  <li><p>The media query that makes the sidebar disappear works, but it leaves a gap. I don't understand why it does not resize according to my css file.</p></li>
  </ul>
  
  <p>This is my html and css code:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
          &lt;div id="header"&gt;
              &lt;img src="logo.jpg" alt="Smiley face" style="height:15%;width:50%;"&gt;
          &lt;/div&gt;
          &lt;div id="mainWrap"&gt;
              &lt;div id="sidebar"&gt;
                  Sidebar
              &lt;/div&gt;
              &lt;div id="main"&gt;
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                  Main
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="footer"&gt;
              Footer
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And this is my css file:</p>
  
  <pre><code>@media screen and (max-width:480px){
  
  #sidebar {
  visibility:hidden;
  width:0;
  }
  #main{
      width:100%;
  }
  
  #mainWrap{
  font-size:0;
  }
  #header{
  color:white;
  margin-bottom:4em;
  }
  
  
  #sidebar{
  font-size:12px;
  width:25%;
  vertical-align:top;
  display:inline-block;
  }
  
  #main{
  font-size:12px;
  width:75%;
  display:inline-block;
  vertical-align:top;
  
  }
  
  #footer{
      font-size:12px;
      border-style: solid;
  }
  </code></pre>