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

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;
}