html - 页面布局未显示正确的结果

<分区>

关闭 9 年前。

这个问题似乎是题外话，因为它缺乏足够的信息来诊断问题。更详细地描述您的问题或include a minimal example在问题本身。
关于您编写的代码问题的问题必须在问题本身中描述具体问题 — 并且包括有效代码 以重现它。参见 SSCCE.org寻求指导。

我想为我的网站创建一个简单的模板。但它没有显示正确的输出。

我想要页眉、菜单栏、正文(左侧导航、内容、右侧导航)、页脚。

为此，我正在使用以下代码，但这没有显示所需的输出。

#left-side {
    position: relative;
    width:150px;
    top: 0px;
    left:0px;
    background-color: #FF6666;
}
#right-side {
    width:150px;
    position: relative;
    top: 0px;
    background-color: #00FF66;
    float: right;
}
#container{
    width: 950px;
    margin: 0 0 0 150px; 
    padding: 0;

}
#header {
    position: relative;
    width:100%;
    height:100px;
    top: 0px;
    background-color:#9eb9c2 ;
}
#menu-bar{
    width:100%;
    height: 20px;
    color :red;
}
#middle{
    position: relative;
    width:100%;
    min-height:100px;
    top: 0px;
    background-color: #555555;
}
#footer {
    position: relative;
    height: 60px;
    width: 100%;
    clear: both;
    background-color: blue;
}

在 html 中

<div id="container">
        <div id="header">
        </div>
        <div id="menu-bar">
        </div>          

        <div id="middle">    
            <div id="left-side">
                <h3>side1</h3>    
                <ul>    
                    <li>Let me say hello</li>    
                </ul>    
            </div>

            <div id="middle-content">    
                <h2>main content</h2>    
               <p>Hwllo</p>    
            </div>

            <div id="right-side">    
                <h3>side2</h3>    
                <ul>    
                    <li>Hiii</li>    
                </ul>    
            </div>    
        </div>

        <div id="footer">    
            <h3>footer</h3>    
        </div>
    </div>

请查看如何获得正确的布局。

最佳答案

希望这对您有所帮助。请检查我刚刚创建的 fiddle 。这是你的想法吗？

您可能需要看一下 css 中的以下概念 - Positioning

Fiddle: Demo