title: Aligning HTML5 page layout with CSS in different browsers
body: <p>Hi guys i have created an HTML5 page and used  tag. The problem is the CSS file i am using, works fine if worked on firefox but the page layout is getting all messed up on chrome and IE8. This is my simple CSS file.</p>
  
  <pre><code>body {
      background-color:silver;
  }
  header, nav, article, footer, section, aside {
      display:block;
      outline-style: groove;
      outline-color: Black;
      outline-width:thin;    
      line-height:normal;   
      margin-bottom:5px;
  }
  header {
      background-color:gray;
  }
  nav {
      float:left;
      width:20%;
      min-width:120px;
      background-color:White;
  }
  nav h1 {
      font-size:large;
  }
  nav li {
      list-style-type:none;
  }  
  section {
       margin-left:1%;
       float:left;
       width:63%;
  }
  aside {
      background-color:White;
      float:right;
      width:15%;
  }
  article {
      /* float:right; */
      float:left;
      margin-left:4px;
      width:99%;
      background-color:White;
  }
  footer {
      clear:both;
      width:100%;
      background-color:White;
      font-size:100%;
  }
  </code></pre>