兩個div並排着一個DIV絕對

Question

所以我有這個網站

<div class="app-wrapper"> 
    <div class="search-form"/> 
    <div class="results"> 
    <div class="tabs"/> 
    </div> 
</div> 

搜索表單具有絕對定位和浮動左。我希望製表符顯示在其旁邊，但位於頁面頂部。請注意，它不一定是標籤始終在屏幕上（不需要固定）。

現在我有

.search-form { 
    position: absolute; 
    width: 30%; 
    min-width: 200px; 
    max-width: 350px; 
    height: 100%; 
    min-height: 600px; 
    float: left; 
} 

.tabs { 
    position: fixed; 
    border-bottom: 1px solid @section-border; 
    width: 70%; 
    height: 3.0em; 
    float: right; 
    left: 31%; 
    background: @tabs-background; 
} 

但這並不在更大屏幕上工作，因爲標籤和搜索形式擴展之間的距離。

如何獲取它，以便標籤在搜索表單旁邊，填充頁面的其餘部分，並且標籤和搜索表單之間的距離不取決於屏幕大小？

所以我就意識到，標籤是另一個div中，用CSS

.results { 
    width: 70%; 
} 

Answer 1

也許這是你在找什麼：http://jsbin.com/ofagoq/11/edit

的CSS：

.search-form { 
    background-color: red; 
    width: 30%; 
    min-width: 200px; 
    max-width: 350px; 
    height: 100%; 
    min-height: 600px; 
    float: left; 
} 

.tabs { 
    background-color: green; 
    width: 70%; 
    height: 3.0em; 
} 

Answer 2

這是一種只使用％寬度的方法。您可以設置最大和最小寬度以及％。 http://jsbin.com/upucob/1/

.app-wrapper { 
    width:90%; 
    float:left; 
    margin:1em 3%; 
    padding: 1em 2%; 
    background: #CCC; 
} 

.search-form { 
    width: 30%; 
    min-height: 600px; 
    float: left; 
    background:#999; 
} 

.tabs { 
    width: 70%; 
    height: 3.0em; 
    float: left; 
    border-bottom: 1px solid #000; 
    background:#888; 
} 



<div class="app-wrapper"> 

    <p>This is the outter container</p> 

    <div class="search-form"> 

     <h3>Form goes here</h3> 

    </div> 

    <div class="tabs"> 

    <h3>Tabs</h3> 

    </div> 

    <div class="results"> 

    <h3>The Results</h3> 

    </div> 

</div>