title: CSS height percentage not scaling image
body: <p>I'm trying to create the top portion of a website to hold a logo on the left and a nav bar on the right. The image is large because I was told it might be used on a HDTV and wanted it to scale well. I thought if I put the logo and a nav bar in the same div i could just apply a percentage to the height so it would always be the top 10% of the screen but it doesn't scale with my code, it just stays the same image size. Any help would be much appreciated. </p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="container"&gt;
      &lt;div id="top"&gt;
      &lt;img src="images/logo.png" alt="logo"&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="#" title="1"&gt;1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" title="2"&gt;2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" title="3"&gt;3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" title="4"&gt;4&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" title="5"&gt;5&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And this is the CSS im using</p>
  
  <pre><code>#top {
  height: 10%;
  width: 100%
  }
  </code></pre>
  
  <p>I would really appreciate anyone's help.</p>