title: Relative Height size with a max-height
body: <p>I am trying to set a height to be relative to the size of the screen (height = 12%), but I don't want it to exceed a certain pixel height (i.e. max-height: 150px). What is the proper css for this. I have tried:</p>
  
  <pre><code>.titleBar {
      position: relative; 
      background-color: #5C755E; 
      padding: 1%; 
      height: 12%; 
      max-height: 100px; 
      border-bottom: .45em solid #DEB887; 
      top:0; 
      left:0; 
      width: 100%;
  }
  </code></pre>
  
  <p>but this ignores the max-height property. On my large desktop screen the titlebar becomes 200px (much too big).</p>