Why even though there #text is 300 pixels wide, and #actions is 200 pixles wide, the #action div doesn't stay on the right top side of the header? It stays on the right, but #text doesn't let it sit on its right. Instead, it pushes #actions down.

HTML Code:
<!DOCTYPE HTML>
<html lang='pt-br'>
  <head>
    <meta charset='UTF-8'>
    <title>Positioning</title>
    <style>
      * {
        /* margin: 0; */
        /* padding: 0; */
      }
      html {
        font-family: 'Verdana';
      }
      #wrapper {
        width: 960px;
        margin: 0 auto;
        background-color: #eee;
      }
      #main_header {
        background-color: #ddd;
        height: 70px;
      }
      #logo {
        width: 200px;
        float: left;
        background-color: #1a9;
      }
      #text {
        width: 300px;
        margin-left: 200px;
        /* float: left; */ /* This makes things work. */
      }
      #actions {
        width: 200px;
        background-color: #7f9f7f;
        float: right;
      }
    </style>
  </head>

<body>

  <div id='wrapper'>
  <header id='main_header'>

    <div id='logo'>
      <h1>Logo</h1>
    </div>

    <div id='text'>
      <h2>Welcome here.</h2>
    </div>

    <div id='actions'>
      <div id='logout'>
        <p><a href='#logout'>Sair</a></p>
      </div>
      <div id='site'>
        <p><a href='#view_site'>Ver o site</a></p>
      </div>
    </div>
  </header>
  <div style='clear: both;'></div>

  <section id='main_section'>

    <h1>Main Section</h1>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer iaculis
    tincidunt velit. Integer malesuada velit ut sapien congue mollis. In placerat
    nunc non diam. Fusce scelerisque placerat lectus. Nulla fringilla porttitor
    felis. Vivamus auctor pharetra elit. Aliquam quis diam. *** sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent
    at libero. Duis scelerisque luctus nibh. Aliquam mi. Lorem ipsum dolor sit
    amet, consectetuer adipiscing elit. Fusce magna libero, lacinia a, sollicitudin
    at, mattis ut, odio. Vivamus sapien lacus, tempus non, interdum vel, tempor
    vel, mauris. Duis consequat vehicula neque. Class aptent taciti sociosqu ad
    litora torquent per conubia nostra, per inceptos hymenaeos.</p>

  </section>

  </div><!-- Fim div id='wrapper'. -->

</body>
</html>