Html htlm5浮动内容不工作

我试着把侧边和部分并排放置，但是我在主包装高度上遇到了一些问题，没有遵循侧边和部分元素

我试着将主包装浮动到左边，效果不错，但内容没有居中

例如：

---

将

溢出：隐藏
添加到主包装中。
html和css结构如何？页面结构是否良好？
<div id="main_wrapper">
        <header>
                    <img id="logo" src="css/images/logo.png" alt="logotipo">
                    <img id="slider" class="slider" src="css/images/slide_1.png" alt="logotipo">
        </header>

            <aside class="aside float">           
                    <img class="icon" src="css/images/icon.jpg" alt="licone">MORADA<br>   
                    <img class="icon" src="css/images/icon.jpg" alt="licone">MORADA<br>   
                    <img class="icon" src="css/images/icon.jpg" alt="licone">MORADA<br>   
                    <img class="icon" src="css/images/icon.jpg" alt="licone">MORADA<br>   
                    <img class="icon" src="css/images/icon.jpg" alt="licone">MORADA<br>   
                    <img class="icon" src="css/images/icon.jpg" alt="licone">MORADA<br>   
                    <img class="icon" src="css/images/icon.jpg" alt="licone">MORADA<br>   
                    <img class="icon" src="css/images/icon.jpg" alt="licone">MORADA<br>   
                    <img class="icon" src="css/images/icon.jpg" alt="licone">MORADA<br>   
                    <img class="icon" src="css/images/icon.jpg" alt="licone">MORADA<br>   
                    <img class="icon" src="css/images/icon.jpg" alt="licone">MORADA<br>   
                    <img class="icon" src="css/images/icon.jpg" alt="licone">MORADA<br>   


        </aside>


        <section class="posts float">
                    <article>
                <header>
                    <h2>Article title1</h2>
                    <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
                </header>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
            </article>

        </section>


        <footer class="clearfix">
            <p>Copyright 2009 Your name</p>
        </footer>
        </div>
    </body>

@media all and (min-width: 942px) {
    body {
        background: #eee;
    }

    #main_wrapper{
        width: 940px;
        margin: 0 auto;
        border:solid 1px black;
        display: block;
  }

  .aside{
      width: 300px;
      border:solid 1px black;

  }

  .posts{
      width: 635px;
      border:1px solid blue;
  }

  footer{
      text-align: right;
  }

/*  ///////////////////     floats   /////////////////
    ///////////////////     floats   /////////////////*/

.float{
      float:left

}

.clearfix{
    celar:both;
}