Div重疊元素

Question

Atm我正在做一個網站的第一次嘗試，最近得到了一份新工作，它需要我學習一些基本的HTML & CSS，因此對於初學者來說，我設置了自己複製現有網站。

問題/難題是：

我想在100％的高度，在小型化browserwindow左和右是可擴展的，以0使3列，而中間列包含的實際內容現場，最小寬度爲60％。在較低分辨率時，我計劃在我的css中實現媒體事物，以便在分辨率低於某個特定限制時刪除左邊的右側列。 我已經將html設置爲& body & all to hight & width 100％。 我試圖做一些事情有點像在這裏：The site im trying to duplicate 我現在的嘗試可以在這裏找到：My attempt

一些代碼懶惰那些不想檢查現場：

<div id=all> 
    <div id=leftmargin></div> 
    <div id=wrapper> 
     <div id=header></div> 
     <div id=nav></div> 
     <div id=content></div> 
     <div id=rightmargin></div> 
    </div> 
</div> 

由於即時通訊非常新的Web開發，請原諒我，如果你需要更多的信息。 我的問題實質上是「leftmargin」和「rightmargin」與'wrapper'-div重疊，我非常希望它位於頁面的中心，然後以較低的分辨率使margin-divs'消耗'通過

CSS。我希望我自己做了比較明確的，在此先感謝。 親切的問候 邁克

Answer 1

我會避免使用用於創建餘量空間的唯一目的核實。相反，讓你身邊酒吧內容會創建您要查找的邊距內容與邊距重疊，因爲它不包含在邊距div中您需要使用「margin-left：」調整主要內容的居中方式側邊欄或其他方式，但它會即時證明你的整體結構。

至於文字以小尺寸重疊容器，刪除「寬度：18.8％;」和「白色空間：nowrap;」來自#lefttop和「最大寬度：18.8％;」來自#leftnav。這將使文本成爲左側灰色容器的全部寬度，並且如果該行不合適，這些單詞將被包裹。

最後，爲了擺脫在小寬度側杆的，如jerrylow推薦，使用

/* screen sizes smaller than 750px apply these styles */ 
@media screen and (max-width: 750px) { 
    #leftnavwrap { 
     display: none; 
    } 
    #shortcut { 
     display: none; 
    } 
    #content { 
     width: 100%; 
    } 
}