内容重叠侧边栏

时间:2013-03-04 20:41:42

标签: html css positioning containers

我的内容与侧边栏重叠。如果你看一下侧边栏容器的边距和填充,你会发现我必须尝试很多东西,包括调整位置,但没有任何作用 -

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

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

同时 当我将侧边栏容器设置为设定高度时,例如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>

感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

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

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

Here is the jsfiddle link.