HTML/CSS 謎の空白ができてしまいました

質問失礼します。

ただいま模写コードを行っていまして、先にフレームに色をつけてから行おうと準備しています。
floatを使ったら、謎の空白ができてしまい消すのに手こずっております。
(グレーと黄色の間です)

リセットCSSはress.cssを使用しています。

まだ始めた段階なので、コードも複雑ではないと思っています。
こちらどのように削除したらいいでしょうか？

HTML
1<body>
2        <!--wrapper here-->
3        <div id="wrapper">
4            <!--header here-->
5            <header></header>
6            <!--header until here-->
7            
8            <!--mainimage here-->
9            <div id="mainimage"></div>
10            <!--mainimage until here-->
11            
12            <!--main here-->
13            <div id="left"></div>
14            
15            <div id="right"></div>
16            <!--maini until here-->
17            <div id="clearfix"></div>
18        </div>
19        <!--wrapper until here-->
20        <footer>
21
22        </footer>
23    </body>

CSS
1body {
2      color: #555;
3      font-size: 14px;
4      line-height: 1;
5      font-family: "メイリオ", Meiryo;
6      background-color: #fff;
7      -webkit-font-something: antialiased;
8      -moz-osx-font-something: graysclae;
9}
10
11header {
12    width: 960px;
13    height: 99px;
14    background-color: pink;
15}
16
17header {
18  width: 960px;
19  height: 99px;
20  background-color: pink;
21}
22
23div#mainimage {
24  width: 960px;
25  height: 300px;
26  background-color: skyblue;
27}
28
29div#left {
30  width: 280px;
31  height: 300px;
32  background-color: gray;
33  float: left;
34  margin-right: 30px;
35}
36
37div#right {
38  width: 650px;
39  height: 300px;
40  background-color: yellow;
41  float: right;
42}
43
44footer {
45  width: 100%;
46  height: 79px;
47  background-color: olive;
48}
49
50div#clearfix {
51  clear: both;
52}