我在造型方面有点菜鸟，但我差点把眼睛挖出来了。。我不明白为什么我页面上的侧边栏不会与主要内容对齐。我使用浮动并添加了一个 clearfix hack 但是似乎没有任何效果。这是代码：HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Brereton C of E A Primary School</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class= "container">
<header>
<div id="logo">
<a href="index.html">
<img src="img/logo.png" alt = "Brereton C of E A Primary School">
</a>
</div>
<nav>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About Us</a>
</li>
<li>
<a href="governors.html">Governors</a>
</li>
<li>
<a href="pta.html">PTA</a>
</li>
<li>
<a href="contact.html">Conact Us</a>
</li>
</ul>
</nav>
</header>
<div id="main" class="cf">
<h2>Welcome to Brereton C of E (A) Primary School</h2>
<h3>
When you first visit Brereton School, you sense very quickly that it is a vibrant, happy, multi-cultural school with respect, tolerance and celebration at its core.
</h3>
<p>
Then, when you look at the school’s results, you will see that the friendly, caring atmosphere is accompanied by an ethos of supporting pupils to achieve their full potential and raise standards.
</p>
</div>
<div id="downloads" class="cf">
<div class="box" id="prospectus">
<a href="#">
<img src="img/prospectus.png">
</a>
</div>
<div class="box" id="newsletters">
<a href="#">
<img src="img/newsletters.png">
</a>
</div>
</div>
<aside class="cf">
<ul class="sidebar">
<li>
<a href="#">Newsletter</a>
</li>
<li>
<a href="">Staff</a>
</li>
<li>
<a href="">Learning Platform</a>
</li>
<li>
<a href="">NCSL</a>
</li>
<li>
<a href="">Ofsted Report</a>
</li>
<li>
<a href="">Teachernet</a>
</li>
</ul>
<form role="search" method="get" id="searchform" action="./Brereton C of E A Primary School_files/Brereton C of E A Primary School.htm">
<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Search">
</div>
</form>
</aside>
<footer>
<h1 class="bottom_logo">
<a href="index.html">Brereton C of E A Primary School</a>
</h1>
</footer>
</div>
</body>
</html>
和 CSS：
/* =====START HACK=====*/
*{
padding:0;
margin:0;
}
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
/* =====END HACK=====*/
/* =====GENERAL STYLING=====*/
body{
background: #fefcea; /* Old browsers */
background: -moz-linear-gradient(top, #fefcea 0%, #efe9bf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#efe9bf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fefcea 0%,#efe9bf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fefcea 0%,#efe9bf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fefcea 0%,#efe9bf 100%); /* IE10+ */
background: linear-gradient(to bottom, #fefcea 0%,#efe9bf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#efe9bf',GradientType=0 ); /* IE6-9 */
width:960px;
margin:auto;
}
h2{
font-family: 'Museo500',"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#553A2A;
}
h3,a,p{
font-family: arial;
}
h3{
font-size: 15px;
}
p{
font-size: 12px;
}
a{
font-size: 12px;
}
/* =====END GENERAL STYLING=====*/
/* HEADER*/
#logo {
width:113px;
margin:auto;
padding-top: 50px;
padding-bottom: 30px;
}
nav{
background:black;
color:white;
height: 30px;
padding-top: 7px;
margin-bottom: 20px;
}
nav a{
color:white;
text-decoration: none;
}
nav a:hover{
color:#e7e7e7;
}
#logo
nav ul{
list-style: none;
}
nav li{
display: inline;
padding-left: 20px;
}
/* END HEADER*/
/* MAIN*/
#main{
width: 60%;
min-width: 400px;
float: left;
padding:10px 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #B8B079;
margin-left: 15px;
padding-left: 10px;
padding-right: 20px;
margin-bottom: 40px;
}
#main h2{
padding-bottom: 5px;
}
#main h3{
color:#3A3A3A;
padding-bottom: 10px;
}
#main p{
color:#3A3A3A;
padding-bottom: 50px;
}
#downloads{
width: 50%;
margin-left: 12px;
float: left;
}
#prospectus{
float: left;
padding-right: 10px;
}
#newsletters{
float: left;
}
/* END MAIN*/
/* ASIDE*/
aside{
float:left;
width: 30%;
}
aside ul{
list-style: none;
}
/* END ASIDE*/
请在这里帮助我，我确实检查了问题部分，但找不到合适的答案。谢谢。