html - 侧边栏的 CSS float 属性(必要时我可以使用表格)

Question

好的，我在一个学校元素中遇到了麻烦，我们必须创建一个有 5 个页面的网站，并将其发布其中一个要求是在每个页面上都有侧边栏，但问题是我们不允许仅使用 float 定位和表格可以用来做到这一点。这是我的外部 CSS /* CSS 文档 */

body{
background-color: #181818;
color: #E60000;
}
#header{
    text-align: center;
    background-color: #000080;
    padding: 20px 0px 0px 0px;
}
#body{
/*this is here for only a certain part of the body*/
    background-color: #000080;
    border: 5px inset #C0C0C0;
    margin-left: 0.7%;
    margin-right: 39%;
    padding: 10px 5px 10px 0px;

}
#sidebar{
    background-color: #000080;
    border: 5px inset #C0C0C0;
    margin-right: 0.7%;
    margin-left: 65%;
    padding: 10px 5px 10px 0px;
    text-align: center;
    height: 100%;
    float: right;

}
p{
    line-height: 160%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    Padding: 5px 10px 5px 10px;
}
/*Navigation bar*/
ul{
    background-color: #000080;
    margin: 10px 10px 0px 10px;
    list-style-type: none;
    padding: 5px 0px 5px 0px;
    text-align: center;
    border: 5px inset #C0C0C0;
}
ul li{
    display: inline;
    padding: 5px 20px 5px 20px;
    text-align: center;
}
ul li a:link, ul li a:visited{
    color: darkred;
    border-bottom: none;
    font-weight: bold;
}
ul li.selected{
    background-color: #181818;
}

这是我的 HTML

<div id="body">
<h1 id="header">About me</h1>
<p>some stuff
<br>
<br>other stuff</p>
<h2 style="text-align: center;">Me</h2>
<ol>
<li></li>
<li></li>
</ol>
<p style = "text-align: center;">
stuff<br>
br>Much more stuff</p>
</div>



<div id="sidebar"><h1>Name here</h1>
<p>Even more stuff</p>
</div>

好的，这就是我为此使用的所有代码，我希望这对您有所帮助

(对不起，根据网站标准，这没有正确编码，但我无法让它工作，对不起)好吧 现在要么我可以让#sidebar 和#body 的 div 出现在同一个位置；但是其中一个文本将位于另一个 div 容器下方，或者一个 div 将出现在页面一侧的另一个下方，我知道这不是很好的 CSS 它只是一个粗略的轮廓，但这是最大的问题对我来说很难修复，所以如果有人能提供帮助，我将不胜感激。

Answer 1

我相信这就是您要找的。

您可以将主要内容部分(我相信您使用#body)的宽度设置为 70%，然后将侧边栏的宽度设置为 30%。然后使用 float: left;在这两个元素上。

请记住，70/30 不考虑您需要考虑的填充或边距。

代码可能是这样的

> #body{    width: 60%;     background-color: blue;     float: left;    height: 200px; }
> #sidebar{     width: 20%;     background-color: red;  float: left;    height: 200px; }
> 
> 
> 
> <div id="body"></div> <div id="sidebar"></div>