title: CSS float pixels and percent mixed
body: <p>Ok, I want this:</p>
  
  <p><img src="https://i.stack.imgur.com/5NaEG.jpg" alt="Correct layout centered on browser window."></p>
  
  <p>For that, I have this HTML code:</p>
  
  <pre><code>&lt;div id="wrapForCenter"&gt;
      &lt;div id="title"&gt;
          title
      &lt;/div&gt;
      &lt;div id="contentFrame"&gt;
          &lt;div id="imagePlaceholder"&gt;
              image
          &lt;/div&gt;
          &lt;div id="content"&gt;
              content
          &lt;/div&gt;
      &lt;/div&gt;            
      &lt;div id="buttonsBar"&gt;
          buttonsBar
      &lt;/div&gt;      
  &lt;/div&gt;
  </code></pre>
  
  <p>And I have this CSS code:</p>
  
  <pre><code>#wrapForCenter
  {
      position: absolute;
      top:50%;
      left: 50%;
      margin-top: -160px;
      margin-left: -240px;
      width: 480px;
      height: 320px;
      border: 1px solid black;
  }
  
  #title
  {        
      width: 100%;
      height: 40px;
      background-color: Blue;
  }
  
  #contentFrame
  {
      height: 240px;
      width: 480px;
  }
  
  #imagePlaceholder
  {
      float: left;
      width: 100px;
      height: 100%;
      background-color: Green;
  }
  
  #content
  {
      float: left;
      width: 380px; /*&lt;-- look at this*/
      height: 100%;
      background-color: Yellow;
      overflow: auto;
  }
  
  #buttonsBar
  {
      clear: left;
      width: 100%;
      height: 40px;    
      background-color: Silver;
  }
  </code></pre>
  
  <p>If I change the contents width to 100%, why occurs this?</p>
  
  <p><img src="https://i.stack.imgur.com/nWGvE.jpg" alt="Contents get 100% with of its container but it not respect image width"></p>
  
  <p>What I spect is that content width would be contentFrame minus imagePlacehoder width in pixels, but when I specify float:left for both, imagePlacehoder and content, content gets its parent container width. Why?</p>
  
  <p>Is there another way to get the same result without using float (maybe display:inline)? And using width:100% for content?</p>
  
  <p>Thank you very much. CSS is not my strenght.</p>