#html5 help

Would anyone know why when I create a media layout, is screws up the desktop layout when I open the webpage?

I am researching HTML5 structural elements and seeing variations on how it should be laid out. 

I.E. - here on Smashing Magazine (however, was written in 2009.)

V.S. 

Image from Informit (2011)

V.S. 

Sketch From A List Apart (2007)

.. looks like the biggest difference is whether the <section> comes before <article>. 

Html code

<div class=’cssmenu’> <ul> <li><a href=’#'><span>Home</span></a></li> <li class=’active has-sub’><a href=’#'><span>Products</span></a> <ul> <li class=’has-sub’><a href=’#'><span>Product 1</span></a> <ul>

Java script code

<script type=”text/javascript”> function altRows(id){ if(document.getElementsByTagName){

var table = document.getElementById(id); var rows = table.getElementsByTagName(“tr”);

for(i = 0; i < rows.length; i++){ if(i % 2 == 0){ rows[i].classN…