我设计了一个网页，并使用 CSS 进行定位。布局是一个标题、水平菜单和一个内容部分（包含 2 列）。Header、Horizontal Menu 和 Content 部分的宽度都相同。
我可以让它们在左侧排列，但是我想将它们“居中”在页面上。
我创建了一个名为“full”的 DIV 来包含所有其他 DIV。当我这样做时，我可以使用 CSS 代码使标题和菜单居中：margin: 0 auto; 在标题和菜单 ID 中，但它不适用于位于左侧的内容 ID。
我可以将内容部分向左或向右浮动，并且它在各自的一侧偏离中心。如果我完全删除浮动选项，则内容部分的背景与正文背景颜色相同。
当我使用调试器时，Body 和#full 覆盖了页面的宽度，但似乎只垂直覆盖了标题和菜单，我不知道为什么。
我的猜测是我需要在某处使用“清除”，但我不确定在哪里。我在#menuBar 中尝试了“clear: both”功能，但它没有用。
任何帮助将不胜感激。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My 1st Practice Page</title>
<style>
#content {
background-color: #eee;
float: left;
}
body {
background-color: silver;
}
#header {
width: 976px;
height: 154px;
background-image: url('images/header-bg.jpg');
background-repeat: no-repeat;
text-align: center;
margin: 0 auto;
}
#header h1 {
color: white;
text-align: center;
padding: 52px;
margin: 0 auto;
}
#menuBar {
width: 976px;
height: 33px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 1.2em;
font-weight: bold;
text-transform: uppercase;
color: white;
background-color: #2F3C4C;
background: 5px solid red;
margin: 0 auto;
}
#menuBar ul {
list-style-type: none;
float: left;
margin: 0 auto;
}
#menuBar li {
float: left;
width: 150px;
padding: 0 10px;
margin: 0 auto;
text-align: center;
}
#menuBar li:hover {
color: blue;
cursor: auto;
}
#columnLeft {
width: 582px;
padding-left: 18px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 0.95em;
line-height: 1.2em;
float: left;
}
#columnLeft img {
float: left;
padding: 5px;
}
#columnRight {
width: 376px;
float: left;
}
#columnRight h2 {
margin: 0 auto;
padding: 10px;
}
#columnRight img {
height: 150px;
width: 150px;
float: left;
padding: 10px;
}
</style>
</head>
<body>
<div id="full">
<div id="header">
<h1> Company Name Inc. </h1>
</div>
<div id="menuBar">
<ul>
<li>home</li>
<li>products</li>
<li>services</li>
<li>about us</li>
<li>contact us</li>
</ul>
</div>
<div id="content">
<div id="columnLeft">
<h2> Category 1 </h2>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. This is some text talking about our first product. This is just a bunch of random information to fill some space. I bet your are really interested. </p>
<h2> Category 2 </h2>
<img src="images/ss_img007.jpg" width="100" height="100" alt="" border="0">
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Here is another paragraph with some more random infomration that I am sure you are not even reading and do not necessarily care about. Lets see how this works. </p>
<h2> Category 3 </h2>
<p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. This is some text talking about our third product. This is just a bunch of random information to fill some space. I bet your are really interested. </p>
<h2> Category 4 </h2>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Here is another paragraph with some more random infomration that I am sure you are not even reading and do not necessarily care about. Lets see how this works. </p>
</div>
<div id="columnRight">
<h2> Pictures </h2>
<img src="images/ss_img001.jpg" alt="" >
<img src="images/ss_img002.jpg" alt="" >
<img src="images/ss_img003.jpg" alt="" >
<img src="images/ss_img004.jpg" alt="" >
<img src="images/ss_img005.jpg" alt="" >
<img src="images/ss_img006.jpg" alt="" >
</div>
</div>
</div>
</body>
</html>