使用CSS定位div

Question

我知道在stackoverflow以及網絡上的其他地方已經有很多這樣的問題。 但是沒有人幫助我。

目前，

我有這個標記：

<div class="wrapper">
    <div class="navigation">
    </div>
    <div class="innerWrapper">
    </div>
</div>

1. 導航是垂直的左側列表
2. innerWrapper是內容區域。 它需要與導航區域重疊-10px。
3. 包裝器需要同時包裝div和根據innerWrapper的高度和寬度進行擴展。

CSS：

.wrapper {
   position: relative;
   min-width: 40em;
   margin: 0;
   overflow: hidden;
   padding: 10px 100px;
   border: red solid 1px;
   margin-bottom: 20px;
}

.navigation, .innerWrapper {
    margin: 0;
    overflow: hidden;
    min-height: 40em;
    position: absolute;
    float: left;
}

.navigation {
    width: 140px;
    margin-left: 0;
    border: red solid 1px;
}

.innerWrapper {
   left: 16.2em;
   border-radius: 2.00em;
   -webkit-border-radius: 2.00em;
  -moz-border-radius: 2.00em;
   border-radius: 1.00em;
   background-color: white;
   border-top: 2px inset rgba(0, 0, 0, 0.2);
   border-bottom: 2px outset rgba(255, 255, 255, 0.2);
   min-width: 900px;
   margin-top: 0;
   padding: 15px;
   clear: both;
}

小提琴

問題：

1. 包裝器未包裝2個div，而是默認將寬度設置為100％，高度將兩個div都吞下

我該如何解決這個問題，所以wrapper div仍然包裝了兩個div； 導航和innerwrapper仍然並排放置，innerwrapper與導航重疊，並且當窗口最小化時，所有div都留在原處嗎？

謝謝您的幫助！

最終修復：

http://jsfiddle.net/jje41mm2/7/

感謝User和Guillermo 。

Answer 1

嘗試這個：

http://plnkr.co/edit/7bGMvzJnLRDWoTnYDUc2?p=preview

您仍然應該修改一些代碼，但是它應該符合您的想法。

.wrapper {
   position: relative;
   min-width: 40em;
   margin: 0;
   padding: 0;
   border: orange solid 1px;
   margin-bottom: 20px;
}

.navigation, .innerWrapper {
    margin: 0;
    float: left;
    position: relative;
}

.navigation {
    width: 10%;
    margin-left: 0;
    border: red solid 1px;
    height: 400px;
}

.innerWrapper {
   border-radius: 2.00em;
   -webkit-border-radius: 2.00em;
  -moz-border-radius: 2.00em;
   border-radius: 1.00em;
   background-color: white;
   border-top: 2px inset rgba(0, 0, 0, 0.2);
   border-bottom: 2px outset rgba(255, 255, 255, 0.2);
   margin-top: 0;
   padding: 15px;
   width: 80%;
   margin-left: -10px;
}

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

Answer 2

當我得到你的要求

我在這里創建了一個jsFiddle演示： [http://jsfiddle.net/jje41mm2/5/][1]
如果您的網站反應靈敏，請更改寬度百分比（而不是px），並讓我知道
您想要任何更改，我將很樂意為您提供幫助

  http://jsfiddle.net/jje41mm2/5/

Answer 3

我看到兩件事：您的CSS至少在引用.innerWrapper時包含一個錯誤，您將其稱為.content-wrapper

你清理浮漂了嗎？ 這是您遇到的一個常見問題，本文可能會幫助您解決： http : //css-tricks.com/all-about-floats/

問候，

吉列爾莫