Newsletter header

[rguy84]

I am trying to convert a newsletter header to css, and the positioning is killing me.

<div id="wrapper">
<div id="header">
  <h1>Name Of Newsletter<span>Quarterly Newsletter</span></h1>
  <span id="issue">Issue ### Month 2010</span>
  <h2>In This Issue:</h2>
    <ul>
    	<li>text</li>
    	<li>text</li>
    	<li>text</li>
    </ul>
 </div>
</div>

Some things:

• The h1, and issue number is on the right.
• the span in the h1 should appear over the Name, so on screen it looks like
  

  Quarterly N
  Name Name

• The issue # is in the top right corner - above the name
• The h2 & ul are on the left

My CSS

#header {
	background: #FC3;
	color: #006;
	padding: 30px 0 0 10px;
	clear: both;
}
#header span#issue {
	display: inline-block;
	background: #006;
	color: #FC3;
	width: 100%;
	text-align: right;
	width: 50%;
	float:right;
	font-size: x-large;
}
#header h1 {
	margin: 0;
	text-align: right;
	font-size: 3.5em;
	position: relative;
	right: 0;
	top: 0;
	width: 50%;
	float: right;
}
#header h1 span {
	font-size: .5em;
}
#header h2 {
	text-decoration: underline;
	margin: 0;
}
#header ul {
	padding: 0 0 0 20px;
	margin: 10px 0 0 0;
	width: 25%;
}