title: CSS blocks float question
body: <p>I have a web page with a right floated navigation panel and content that wraps it. Content is displayed as multiple divs of same size.  The problem is that the right panel is dynamic with variable height, and in most cases when a div is  placed under the panel, then it doesn't stay in the same line with its preceding divs but becomes shifted down. This in turn increases space between the lines. I want to make so that a div would be placed under the right panel only if it would stay in the same line with the preceding divs and not break the page layout. How can I achieve this? Thanks!</p>
  
  <p>My HTML/CSS:</p>
  
  <pre><code>&lt;div id="content"&gt;
  &lt;div id="navrgt"&gt;this is rigth navigation panel&lt;/div&gt;
  
  &lt;div class="prodthumb"&gt;&lt;/div&gt;
  &lt;div class="prodthumb"&gt;&lt;/div&gt;
  &lt;div class="prodthumb"&gt;&lt;/div&gt;
  &lt;div class="prodthumb"&gt;&lt;/div&gt;
  &lt;div class="prodthumb"&gt;&lt;/div&gt;
  &lt;div class="prodthumb"&gt;&lt;/div&gt;
  &lt;div class="prodthumb"&gt;&lt;/div&gt;
  &lt;div class="prodthumb"&gt;&lt;/div&gt;
    &lt;div class="clear"&gt;&lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#content
  {
  position:relative;
  border:1px solid yellow;
  }
  
  .prodthumb 
  {
  float:left;
  margin:10px;
  width:200px;
  height:200px;
  background-color:grey;
  }
  
  #navrgt
  {
  position:relative;
  float:right;
  right:0px;
  top:0px;
  width:200px;
  height:50px; /*height is variable. 50px is for this example only */
  border:1px solid red;
  }
  
  div .clear 
  {
  clear:both;
  }
  </code></pre>