Фиксированный размер div, который находится справа от главного div, который заполняет остаток экрана

Question

Я видел много вопросов, но ни один из них, похоже, не решил мою проблему.

У меня есть два divs: mainbody и правая панель. Я хотел бы, чтобы правая панель была фиксированным размером (210 пикселей) и сидела справа от основного div, который заполняет все оставшееся пространство окна.

Так было бы изменить размер, как это:

+----------------------------------------+ 
|        |   | 
|        |   | 
|        |   | 
|  mainbody    |rightpanel| 
|        |   | 
|        |   | 
|        |   | 
+----------------------------------------+ 

+-------------------------------+ 
|     |   | 
|     |   | 
|     |   | 
| mainbody   |rightpanel| 
|     |   | 
|     |   | 
|     |   | 
+-------------------------------+ 

мое текущее решение ниже рода работ, но если при изменении размера окна ниже примерно 900px право бар получает толкнул на дно в виде оставшегося пространства 25% становится слишком маленьким, чтобы он мог вписаться, поэтому я заставляю окно горизонтально прокручивать эту ширину.

#wrap { 
    width:97%; 
    margin:0 auto; 
} 

#mainbody { 
    float:left; 
    width: 75%; 
    margin-right: 10px; 
    margin-left: 10px; 
} 

#rightpanel { 
    float:right; 
    width: 22%; 
    min-width: 210px; 
    max-width: 210px; 
} 

Answer 1

Вам нужно положить правую панель перед основным содержанием, если вы плаваете его:

<div id="rightpanel">blah blah blah</div> 
<div id="mainbody">blah blah blah 
    blah blah blah 
    blah blah blah 
</div> 

<style type="text/css"> 
    #rightpanel { 
     width:210px; 
     float:right; 
     background-color:red; 
    } 
    #mainbody { 
     margin-right:210px; 
     background-color:blue; 
    } 
</style> 

Это приведет к тому, что правая панель будет правильно выровнена, даже если страница будет изменена.

Answer 2

#mainbody { 
float: left; 
} 
#rightpanel { 
width: 210px; 
} 

Вы пробовали что-то вроде этого?

Answer 3

Это должно работать

<div id="container"> 
    <div id="left" style="background: #ff00ff; "> 
     Left 
     <div id="right" style="width: 210px; float: right; background: #ff0000;"> 
      Right 
     </div> 
    </div> 
</div> 

Answer 4

посмотреть на моем сайте: http://www.mcohenlawyer.com/
является его то, что вы хотите?

если да, то это код CSS:
(поддерживается во всех основных браузерах)

div.menubar { 
    position: fixed; /*can be absolute too*/ 
    width: 158px; 
    /*what comes latter is not relevant for your question*/ 
    /*......*/ 
} 
.body { /*the main body*/ 
    position: absolute; 
    right: 180px;/*can be 159px, if you don't want space between divs*/ 
    min-height: 870px; 
    /*what comes latter is not relevant for your question*/ 
    /*......*/ 
}