Figuring out CSS for a three column layout with header [sketch included]

Question

I'm using this CSS track to get the hang of what's happening in the browser. However, the last assignment was an incomplete success . How can I push the post-updates section not only right, but to the top of the page?. (So far I've tried position: absolute without much luck).

ed: Both answers helped, I am grateful.

Answer 1

You can try this:

Working Fiddle here

#post-update {
  position:absolute;
  top:0; right:0;
}

Good Luck...

Answer 2

The <div id="post-update"> needs to be floated right and the width of the header narrowed to fit in the screen.

JSFiddle Demo

HTML

<div id="content">

    <div id="header">
        <h1 id="stf">Stanford Connection</h1>
        <img src="//i62.tinypic.com/i2onyf.gif" alt="I'm a tree"/>  
    </div>

    <div id="about">
        <img src="//i62.tinypic.com/2vnkmtl.jpg" alt="Molly"/>
        <h2 class="section-heading">About Me</h2>
        <p><strong>Birthday:</strong> December 8, 2001</p>
        <p><strong>Gender:</strong> Female</p>

        <h2 class="section-heading">Friends</h2>
        <p><strong>Patrick Young</strong></p>
        <p><strong>Chloe Cox</strong></p>
    </div>

    <div id="updates">
        <h1>Molly the FloPup</h1>
        <h2 class="section-heading">Status Updates</h2>
        <p>When am I going to get fed?</p>
        <p>I want to go for a walk. </p>
        <p>There's a squirrel on the patio, why won't Patrick let me chase it? </p>
        <p>I really like summer, because I get to sun myself on the patio </p>
    </div>



</div>
    <div id="post-update">
        <h2 class="section-heading">Post Updates</h2>
        <form action="">
            <textarea name="" id="" cols="30" rows="10"></textarea>
            <br>
            <input type="button" value="Submit New Update" align="left"/>
        </form>
    </div>

CSS

body {
  padding: 0.5em;  
}

strong {
  font-weight: bold;
}

h1 {
  font-size: 32pt;
  text-indent: 1em;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}

#stf {
  margin-left:1em;
  line-height: 2.5em;  
  display: inline;      
  vertical-align: top;
}

#content {
    width:50em;
    float:left;


}

#header {
  background-color: #9A0000;
  color: white;
  height: 120px;
}

#header img {
  display: inline;
  vertical-align: top;
  float: right;  
}

.section-heading {
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  background-color: #CC9191;
  font-size: 13pt;
  padding-left: 0.5em;
  padding-bottom: 0.3em;
  padding-top: 0.3em;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}

#about {
  width: 200px;
  font-family: sans-serif;
  font-size: 12pt;  
  float: left;
}

#about img {
  margin-top: 7px;
}

#updates {
  /* background: #AA4; */
    float:left;
    margin-left:10px;
}

#updates p {
  border-top: 2px solid black;
  line-height: 2em;
}

#post-update {
   float: right;
}

textarea {
  width: 17em;
  height: 7em;
}