IEのfloatがきかない

お世話になっております。
floatを使用して2カラムのページを作成しています。
choromeでは正しく表示されるのですが、IEでは表示が崩れてしまいます。

画像をご覧いただきたいのですが
1枚目がchorome、2枚目がIEです。
”カテゴリ”の横に”企画”を持ってきたいのですが
表示が崩れてしまっています。

clearを試してみたのですが
うまくいきません。

恐れ入りますが原因をお教えいただければと存じます。
よろしくお願い致します。

chorome

HTML
1<div class="left_2">
2  <div class="categoly">
3    <h2>カテゴリ</h2>
4    <ul>
5      <li class="categoly">カテゴリ</li>
6      <li class="categoly">リュック</li>
7    </ul>
8    <div class="clearfix"></div>
9  </div>
10
11</div>
12<div class="sub>">
13<div class="wrapSub_1">
14<div class="sub_1">企画1</div>
15<div class="sub_2">企画2</div>
16</div>
17<div class=wrapSub_2>
18<div class="sub_3">企画3</div>
19<div class="sub_4">企画4</div>
20</div>
21</div>

CSS
1
2div.left_2{
3	width: 1010px;
4	margin: auto;
5}
6
7div.categoly{
8	width: 190px;
9	margin-top:10px;
10	margin-right:10px;
11	float: left;
12}
13
14h2{
15	margin: 0 0 0 0;
16
17	font-size: 15px;
18	line-height: 30px;
19	font-weight: normal;
20	background-color: #000;
21	text-align: center;
22	color: #fff;
23}
24
25div.categoly > ul{
26	height: 754px;
27	background-color: #515;
28	margin-top:0;
29}
30
31div.categoly > ul > li{
32	list-style-type: none;
33	background-color: #aca;
34}
35
36div.sub{
37	width: 810px;
38	height: 1000px;
39	background-color: #000;
40	float: left;
41}
42
43div.wrapSub_1{
44	width: 810px;
45	height: 210px;
46	background-color: #000;
47	float:left;
48}
49div.sub_1{	
50	width: 400px;
51	height: 200px;
52	margin-top: 10px;
53	margin-right: 10px;
54	background-color: #ccc;
55	float: left;
56}
57
58div.sub_2{
59	width: 400px;
60	height: 200px;
61	margin-top: 10px;
62	background-color: #ccc;
63	float: left;
64}
65
66
67div.wrapSub_2{
68	width: 810px;
69	height: 210px;
70	float:left;
71}
72div.sub_3{
73	width: 400px;
74	height: 200px;
75	margin-top: 10px;
76	margin-right: 10px;
77	background-color: #ccc;
78	float: left;
79}
80
81div.sub_4{
82	width: 400px;
83	height: 200px;
84	margin-top: 10px;
85	background-color: #ccc;
86	float: left;
87}