内容重叠侧边栏

Question

我有与侧边栏重叠的内容。如果你看一下margin和padding边栏容器，你会看到，我不得不我已经试过许多事情，包括调整位置，但没有任何工程─

***示例屏幕截图： http://tinyurl.com/cefamyt

***工作实施例 http://www.bestthrillermovielist.com/indextest.php#topofpage

ALSO 当我边栏容器设置为一组高度，比方说，4000px;而不是我现在拥有的方式，没有任何电影内容与侧边栏重叠。我试图让边栏容器拉长窗口的整个高度，但无济于事

来自#movieinfo的内容与边栏内容结束时侧边栏的内容重叠。 #sidebarcontainer上的边距/边距允许边栏延伸到屏幕的整个长度，但由于某些原因，#movieinfo内容会滑到右侧内容的边栏内容结束处。

CSS：

#container { 
    max-width:90%; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:25px; 
    overflow:hidden; 
} 

#movieinfo { 
    padding-right:375px; 
    margin-top:25px; 
    display:inline; 
    position:relative; 
} 

#sidebarcontainer { 
    float: right; 
    width:345px; 
    background:#fff; 
    margin-bottom: -5000px; 
    padding-bottom: 5000px; 
    height:100%; 
    position:relative; 
} 

#movieright { 
    float:right; 
    width:340px; 
    height:100%; 


    } 

#movierightcontainer { 
    float:right; 
    width:100%; 
    margin-bottom:8px; 
    margin-top:0px; 
    height:100%; 
    padding: 0 2%; 

} 

.movienav { 
    width: 320px; 
    height: 430px; 
    float: left; 
    margin-right: 20px; 
    position: relative; 
    display:inline; 
    margin-top:25px; 
    margin-bottom:45px; 
} 

HTML

<div id="container"> 
    <div id="movieinfo"> 
     <?php include("sidebar.php");?> 
<div class="movienav"></div> 
    </div> 
</div> 

***SIDEBAR.php*** 
<div id="sidebarcontainer"> 
    <div id="movierightcontainer"> 
     <div id="movieright"></div> 
    </div> 
</div> 

任何帮助表示赞赏。

Answer 1

问题是你正在把所有东西都放在#container左边的列需要有一个单独的div，而不是右边的列。电影海报与右列重叠，因为右列右移，并且不再有内容。这就是为什么在右栏添加高度的原因。

我创建了jsfiddle中需要发生的简化版本。我制作的海报更小，因此在预览窗口中查看更容易。但是这个概念是正确的。

Here is the jsfiddle link.