私はスタイリングの初心者ですが、ここで目を丸くしそうです..ページのサイドバーがメインコンテンツと整列しない理由がわかりません..フロートを使用し、clearfixハックを追加しましたが、何も機能していないようです。コードは次のとおりです。 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*/
ここで私を助けてください。質問セクションを確認しましたが、適切な回答が見つかりませんでした. ありがとう。