title: Make fixed size <div> be scalable in fluid layout
body: <p>I'm seasoned webdesigner, so I don't know much about this art.</p>
  
  <p>I got three  elements placed horizontally (left/center/right) which have fixed size:</p>
  
  <pre><code>.banner-box {
      position: relative;
      display: inline-block;
      width: 300px;
      height: 400px;
      margin: 0 auto;
  }
  </code></pre>
  
  <p>and inside every div there are few images, that are centered horizontally and general style for img is:</p>
  
  <pre><code>img {
      max-width: 100%;
  }
  </code></pre>
  
  <p>to make them fluid.</p>
  
  <p>But since divs are not flexible, images inside them also won't change their size when resizing browser window.</p>
  
  <p>Is it possible to set fixed size on any html element and still somehow make it fluid?
  I know I could use percentages instead pixels, but I've got also problems with setting proper height for .banner-box using percents - box doesn't stretches to desired 400px, only to 281px.</p>
  
  <p>Here's html:</p>
  
  
  
              
                  
              
  
              
  
                  
  
                      
                          
                      
  
                      
                          
                      
  
                      
  
                          
                              
                          
  
                      
  
                  
  
                  
  
                      
                          
                      
  
                      
                          
                      
  
                      
  
                          
                              
                          
  
                      
  
                  
  
                  
  
                      
                          
                      
  
                      
                          
                      
  
                      
  
                          
                              
                          
  
                      
  
                  
  
                  
                      
                  
  
              
  
          
  
  <pre><code>    &lt;div id="footer"&gt;
  
          &lt;img src="footer-line.png" alt="Footer.png" /&gt;
          &lt;p&gt;&lt;span&gt;some span&lt;/span&gt; blah&lt;/p&gt;
          &lt;p&gt;mail: &lt;span&gt;mail@domain.com&lt;/span&gt;&lt;/p&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>And whole css for my simple webpage:</p>
  
  <pre><code>html {
      background: url('mu-media-background-1920.png') no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: 100% 100%;
  }
  
  img {
      max-width: 100%;
  }
  
  
  #container {
      width: 1200px;
      margin: 5% auto;
      text-align: center;
  }
  
  #header {
      display: block;
      clear: both;
      position: relative;
      width: 100%;
      margin: 0 auto;
  }
  
  #content {
      display: block;
      width: 95%;
      height: auto;
      margin: 10% auto 5% auto;
  }
  
  .banner-box {
      position: relative;
      display: inline-block;
      width: 300px;
      height: 400px;
      margin: 0 auto;
  }  
  
  .banner-text {
      position: relative;
      display: block;
      top: 7%;
      margin: 0 auto;
  }
  
  .see-more-button {
      position: absolute;
      display: block;
      margin: 0 auto;
      left: 0; right: 0; bottom: 0;
  }
  
  #virtual-studio {
      float: left;
  }
  
  #mu-animation {
      float: right;
  }
  
  
  #shadows {
      display: block;
      clear: both;
      position: relative;
      width: 100%;
  }
  
  #shadows img {
      display: block;
      clear: both;
      position: relative;
      margin: 0 auto;
  }
  
  #footer {
      display: block;
      clear: both;
      width: 95%;
      margin: 0 auto;
      font: 15px Arial, Helvetica, sans-serif;
  }
  
  #footer p {
      display: table;
      clear: both;
      position: relative;
      margin: 0 auto;
      color: #AFBEA5;
      text-align: center;
      width: auto;
  }
  
  #footer span {
      font-weight: bold;
      color: #BDC9AF;
  }
  </code></pre>
  
  <p>I'm preparing responsive layout, so it would be best (afaik) to use only percentages.</p>