Correct HTML5 mark-up for floating logo, slogan and 2 navs

I'm having difficulty understanding the recommended method for using sections, navs, headers and floating div containers in unison.

I have a network-wide nav followed by a site-wide nav, just like this Stack Overflow website.

Based on the following code...

<header>

    <!--Navigation menu for network:-->
    <section>
        <nav>
            <a href="#">Link</a>
            <a href="#">Link</a>
            <a href="#">Link</a>
        </nav>
    </section>

    <!--Navigation menu for site:-->
    <section>
        <div class="float-left">
            <h1>Logo Text</h1>
            <h2>Slogan Text</h2>
        </div>
        <nav class="float-right">
            <a href="#">Link</a>
            <a href="#">Link</a>
            <a href="#">Link</a>
        </nav>
    </section>

</header>

...should I have both navs in their own sections within the one header as is or should I have two headers?
...should my div.float-left be a section within a section?
...overall, is there a better way to arrange my mark-up?

Solution

HTML5 sectioning elements can be a bit challening, but I'll try to give you a solid walk-through:

The header element This element can be used wherever you feel "introductory" content could live. The most logical example would be the header of a website that is shown on every page, but it can also be a header inside an article. Your use of header is fine.

The section element This element is tricky and should really only be used to group content together. A good example would be if you have a news section on your homepage with a collection of latest news articles. Try reading this previous sentence out loud and you'll notice the words section and article who have a relation ;-) Your use of the section element is not correct. Note: it's mandatory for a section to include a heading!

The nav element This element should exclusively be used for navigational items in two cases:

Website-wide navigation (like navigation in your global header)
Article navigation (e.g. to navigate between chapters in an article)

Don't use the nav element for anything else, it is really only useful for "main" navigations. In your case, it's fine, because both navs are very "global". Note: all nav elements should have a heading!

To come back to your example, the following markup would be more appropriate and valid:

<header>

    <!-- Navigation menu for network: -->
    <nav>
        <h2>Network navigation</h2>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </nav>

    <!-- Logo, title and slogan -->
    <img src="some/path" alt="Logo Description" class="logo">
    <h1>Website name</h1>
    <p class="slogan">Slogan text</p>

    <!-- Navigation menu for network: -->
    <nav>
        <h2>Site navigation</h2>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </nav>

</header>

HTML5 Doctor has a lot of good resources on this as well! http://html5doctor.com/