float/position CSS

Screenshot 1: https://skitch.com/android86/fm4r7/dreamweaver ( HTML design view)

Screenshot 2: https://skitch.com/android86/fm4fd/dreamweaver ( CSS)

In the screenshot 1, I tried to have the links for website Contact and Login as a part of the Nav tag provided by html 5, however I wanted these to be horizontally next to the hgroup.

I assigned a width to hgroup and now I have a lot of space to the right of hgroup however the nav is starting to line up horizontally, is this something I should handle with position or float property in CSS?

I tried both in various combinations, I assigned a width to nav in order to fit in the area however it doesn't seems to be working. Any clue?

The CSS code is in screenshot 2. After looking at a previous discussion here I thought u开发者_StackOverflow社区sing class might not be required instead rather parent child relation might be most relevant. I personally thought and read that one should use id's in CSS when it is a very unique scenario and class when we expect to use a certain thing very commonly, is this parent child relation a way of declaring a class? Thanks everyone.

It can be handled by floating both elements left and removing all fixed widths. Here is the amended jsFiddle: http://jsfiddle.net/joshnh/jdUWt/

​