title: css3 flex-box internet explorer not aligning properly
body: <p>I've been following this <a href="http://www.youtube.com/watch?v=F1uzS6PAjuc" rel="nofollow">tutorial video here</a> it shows everything clearly about flexible boxes in css3. i dont have any problem on mozilla or chrome. But  box is placed just below of section box in internet explorer. demo can be found <a href="http://www.mreo.net/html5/index.html" rel="nofollow">here</a> (if you view on mozilla,ie you can see the difference).  here is the html codes which ive been playing with: </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;title&gt; First html5 &lt;/title&gt;
  &lt;link rel="stylesheet" href="mainnew.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt; 
  &lt;div id="big_wrapper"&gt;
  &lt;header id="top_header"&gt;
  &lt;h1&gt; Welcome to html5 &lt;/h1&gt;
  &lt;/header&gt;
  
  &lt;nav id="top_menu"&gt;
  &lt;ul&gt;
  &lt;li&gt;Home&lt;/li&gt;
  &lt;li&gt;Tutorials&lt;/li&gt;
  &lt;li&gt;Podcast&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;div id="new_div"&gt;
  &lt;section id="main_section"&gt;
  &lt;article&gt;
  &lt;header&gt;
  &lt;hgroup&gt;
  &lt;h1&gt;Title of article&lt;/h1&gt;
  &lt;h2&gt;Subtitle for article!&lt;/h2&gt;
  &lt;/hgroup&gt;
  &lt;/header&gt;
  &lt;p&gt;This is the best article eva!&lt;/p&gt;
  &lt;footer&gt;
  &lt;p&gt;- writtern by Emre Caglar &lt;/p&gt;
  &lt;/footer&gt;
  &lt;/article&gt;
  
  &lt;article&gt;
  &lt;header&gt;
  &lt;hgroup&gt;
  &lt;h1&gt;Title of article2&lt;/h1&gt;
  &lt;h2&gt;Subtitle for article2!&lt;/h2&gt;
  &lt;/hgroup&gt;
  &lt;/header&gt;
  &lt;p&gt;This is the best article eva!&lt;/p&gt;
  &lt;footer&gt;
  &lt;p&gt;- writtern by Emre Caglar &lt;/p&gt;
  &lt;/footer&gt;
  &lt;/article&gt;
  &lt;/section&gt;
  
  &lt;aside id="side_news"&gt;
  &lt;h4&gt;News&lt;/h4&gt;
  Emre has a new dog
  &lt;/aside&gt;
  
  &lt;/div&gt;
  
  
  &lt;footer id="the_footer"&gt;
  Copyright mreonet 2012
  &lt;/footer&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and css codes </p>
  
  <pre><code>body{
          width:100%;
          display:-webkit-box;
          display: -moz-box;
          display: box;
          -webkit-box-pack:center;
          -moz-box-pack:center;
          box-pack:center;
      }
      #big_wrapper {
          max-width: 1000px;
          margin:20px 0px;
          display:-webkit-box;
          display: -moz-box;
          display: box;
          -moz-box-orient: vertical;
          -webkit-box-orient: vertical;
          box-orient: vertical;
          -moz-box-flex: 1.0; 
          -webkit-box-flex: 1;
          box-flex: 1;
  
      }
      #top_header {
          background:yellow;
          border: 3px solid black;
          padding:20px;
      }
      #top_menu { 
          border:red;
          background:blue;
          color:white;
      }
      #top_menu li {
          display:inline-block;
      }
      #new_div { 
          display:-webkit-box;
          display: -moz-box;
          display: box;
          -webkit-box-orient:horizantal;
          -moz-box-orient: horizontal;
          box-orient: horizontal;
  
      }
      #main_section {
          border:1px solid blue;
          margin:20px;
          padding: 20px;
          -moz-box-flex: 1.0; 
          -webkit-box-flex: 1;
          box-flex: 1;
  
      }
      #side_news {
          border:1px solid red;
          width:220px;
          margin:20px 0px;
          padding:30px;
          background:#66cccc;
  </code></pre>
  
  <p>I've also noticed that when i view this page on ie8 it is not taking css styling. i am really new on html5 and might make silly mistakes..</p>
  
  <p>Can any one help me on this. BTW this is my first question and if i miss anything let me know and sory about it.</p>