CSS blocks float question

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!

My HTML/CSS:

<div id="content">
<div id="navrgt">this is rigth navigation panel</div>

<div class="prodthumb"></div>
<div class="prodthumb"></div>
<div class="prodthumb"></div>
<div class="prodthumb"></div>
<div class="prodthumb"></div>
<div class="prodthumb"></div>
<div class="prodthumb"></div>
<div class="prodthumb"></div>
  <div class="clear"></div>
      </div>

CSS:

#content
{
position:relative;
border:1px solid yellow;
}

.prodthumb 
{
float:left;
margin:10px;
width:200px;
height:200px;
backgroun开发者_运维问答d-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;
}

I suppose this is your problem:

In this case, I would suggest wrapping the prodthumb divs with an additional div.

This will make the boxes align like this:

Here is the code:

HTML:

<div id="content">
<div id="navrgt">this is rigth navigation panel</div>

<div class="prods">
    <div class="prodthumb"></div>
    <div class="prodthumb"></div>
    <div class="prodthumb"></div>
    <div class="prodthumb"></div>
    <div class="prodthumb"></div>
    <div class="prodthumb"></div>
    <div class="prodthumb"></div>
    <div class="prodthumb"></div>
    <div class="clear"></div>
</div>

CSS:

#content {
position:relative;
    border:1px solid yellow;
    }
    .prods {
        float:left;
    }

.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;
}

So heres an example that works like you want, i believe http://jsfiddle.net/RshTE/

Only thing is that i believe that IE6 wont like this.. I dont like to support ie6 anyways.

http://jsfiddle.net/RshTE/ there are couple other downsides to this code that are shown in the example.

But, uh... Enjoy? :D

I've never really had to do something like this so there might be a better way and i just dont know that.

CSS:

#wrap {
    width: 600px;
    margin: 0px auto;
    border: 1px solid #e1e1e1;
}

#sidebar {
    float: right;
    width: 150px;
    border: 1px solid #e1e1e1;

    height: 220px;
}

.content-box {
    overflow: auto; /* Important part */
    border: 1px solid #e1e1e1;
}

HTML:

<div id="wrap">
    <div id="content">
        <div id="sidebar">Sidebar</div>
        <div class="content-box">Content box 1</div>
        <div class="content-box">Content box 2</div>
        <div class="content-box">Content box 3</div>
    </div>
</div>

Edit: http://jsfiddle.net/RshTE/8/ & http://jsfiddle.net/RshTE/9/

( Information about the display: inline; hack http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ )