兩個DIV 1與靜態寬度，其他調整，但如何得到正確的div堆棧UNDER @斷點？

Question

我有兩個div旁邊每個/並排..

LEFT div有一個FLUID寬度。 RIGHT div有一個靜態wdth。

當我調整屏幕/瀏覽器的大小...它工作得很好！ （並按照預期）。 但是因爲它是設置方式：

（小提琴例如：http://jsfiddle.net/VHcPT/384/）

在物理先在加價的RIGHT DIV。（和右浮動）。

然而，在說768px斷點..我需要這個右（靜態）DIV堆棧下左分區..我怎麼能做到這一點？

如果我在標記中的左側div之後物理上有正確的div，它會按預期堆疊，但我需要首先將它放到第一位，以使流體/靜態行爲正常工作。

所以重新上限，它不是關於讓兩個div彼此相鄰一個流體，一個靜態..它如何處理響應/斷點..並獲得靜態（右）div的堆棧在流體下（左）div

使用小提琴示例.. RED DIV將在綠色線/ div下（綠色將成爲全寬）......在某個斷點處。

因爲現在需要的代碼：

HTML：

<div id="contentcontainer"> 
    <div class="rightcontainer">mm</div> 
    <div class="leftcontainer"> 
     <div class="item_1"> 
      some text 
     </div> 
     <div class="item_2"> 
      some text 
     </div>   
    </div>   
</div> 

CSS：

#directorycontainer { 
    padding:10px 10px; 
    display:table; 
    box-sizing: border-box; 
    width: 100%; 
    font-size: 0.8em; 
    font-weight: normal; 
} 


.directory { 
    background: green; 
    margin-right: 10px; 
    overflow: hidden; 
    padding-right: 10px; 
    position: relative; 
} 

.mapcontainer { 
    background: red; 
    display:table; 
    width:240px; 
    height:480px; 
    float:right; 
    position:relative; 
    overflow: hidden; 
} 

.providercontainer{ 
    background-color: #f7f9fb; 
    border: 1px solid #e1dacd; 
    display: table; 
    margin-bottom: 0.625em; 
    padding: 0; 
    width: 100%; 
} 

Answer 1

OK以及看起來像這樣的作品，應該是一個可以接受的答案/解決方案：

小提琴： http://jsfiddle.net/VHcPT/389/

HTML /標記：

<div id="contentcontainer"> 
    <div class="leftcontainer"> 
     <div class="item_1"> 
      some text 
     </div> 
     <div class="item_1"> 
      some text 
     </div>   
    </div> 
    <div class="rightcontainer">mm</div> 
</div> 

CSS：

* {box-sizing: border-box;} 

#contentcontainer { 
    padding:10px 10px; 
    display:table; 
    box-sizing: border-box; 
    width: 100%; 
    font-size: 0.8em; 
    font-weight: normal; 
} 


.leftcontainer { 
    background: green; 
    overflow: hidden; 
    padding: 5px; 
    float:left; 
    width:calc(100% - 240px); 
} 

.rightcontainer { 
    background: red; 
    display:table; 
    width:240px; 
    height:480px; 
    float:left; 
    position:relative; 
    overflow: hidden; 
} 

.item_1{ 
    background-color: #f7f9fb; 
    border: 1px solid #e1dacd; 
    display: table; 
    margin-bottom: 0.625em; 
    padding: 0; 
    width: 100%; 
} 

作品與任何斷點設置和元素將正確地疊加。

Answer 2

你可能會喜歡我的FLEXBOX替代你的問題。這可能需要一些練習，但最終會給你更多的控制權。

The FIDDLE

下面的基本結構的CSS，沒有其他的 '顯示'， '位置' 或 '溢出' 需要的。有了這個結構，您可以混合使用任意數量的固定和/或流體柱。

.flex--box { display: flex; flex-flow: row wrap } 
.flex--fluid { flex: 1 1 auto } 
.flex--fixed { flex: 0 0 auto; min-width: 240px } 

/* MOBILE MQ */ 
@media all and (max-width: 360px) { 
    .flex--fluid, .flex--fixed { 
     flex: 1 1 auto; 
    } 
} 

讓我知道你是否有問題。

當然，如果您認爲它是值得的，那麼請給予功勞。 （順便說一句：我改變了顏色，以減少視網膜密集& D）