Using New HTML5 Tags

I'm trying new HTML5 tags. I want to do something like this : http://www.jsfiddle.net/TYTkZ/

I'm using this code : http://www.jsfiddle.net/cysBf/

You will see the difference when 开发者_如何学Goyou click link. Can you help me ? Why there is space between #main and #sidebar sections?

And page hierarchy is true ?

Add this code in your css:

header,footer,article,section,aside,nav {
  display:block;
}

I updated your code in jsfiddle.

When using HTML5 elements remember to include this file before any CSS etc (so the top of the head tag would be best).

<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Because IE 8 and below do not know the the HTML5 elements they will not let you style them, this script allows the styling of HTML5 elements in older IEs.

EDIT

I know this is not his direct question but no one should make this mistake.

You're using float:right on #sidebar, so the element will end up all the way to the right. Try float:left on #sidebar to make it float next to the #main element

The width of 300px is ignored because section is not defined as display:block