Align A Sidebar Next To A Header ...?

Hey everyone!

I've got a question for you all --- Forgive me if the answer seems a little obvious. I know the answer's within my own grasp, but I've got a headache and I simply can't figure it out today!

Let's say I wanted to take my current WordPress theme, which is laid out like this:
http://i47.tinypic.com/wrkpcg.gif

And I wanted to instead make it laid out like this, with the sidebar sorta beside the header:
http://i46.tinypic.com/24fg3f6.gif

How would I go about creating this alignment by modifying my current CSS file? I've pasted it below for reference!

/*
Theme Name: Version Thirty Eight
Description: mallorymaloney.com's very first WordPress based layout
Version: 1
Author: Mallory Maloney
Author URL: http://www.mallorymaloney.com/
*/

body, h1, h2, h3, h4, h5, h6, blockquote, p{
margin: 0;
padding: 0;
}

body{
text-align: center;
font-family: Verdana, Tahoma, Arial;
font-size: 11px;
vertical-align: top;
color: #000000;
background: #ffffff url('http://www.mallorymaloney.com/wp-content/themes/versionthirtyeight/background1.gif') fixed;
}

h1{
text-align: center;
padding: 10px 0 4px 0;
}

h2{
text-align: center;
font-size: 9px;
font-weight: normal;
margin: 10px 0 10px 0;
padding: 5px 0 5px 0;
border: 3px solid #000000;
background: #ffffff url('http://www.mallorymaloney.com/wp-content/themes/versionthirtyeight/background2.gif');
}

h3{
text-align: center;
font-size: 11px;
font-weight: normal;
padding: 0 0 10px 0;
}

h4{
text-align: center;
padding: 0 0 10px 0;
}

hr{
text-align: center;
color: #000000;
height: 3px;
width: 300px;
}

a:link, a:visited{
text-decoration: none;
font-family: Verdana, Tahoma, Arial;
font-size: 11px;
font-weight: bold;
color: #000000;
}

a:hover{
text-decoration: none;
font-family: Verdana, Tahoma, Arial;
font-size: 11px;
font-weight: bold;
color: #737373;
}

p{
padding: 0 0 10px 0;
}

code{
text-decoration: none;
font-family: 'Courier New', Courier, 'Times New Roman', Times;
font-size: 11px;
color: #737373;
}

img{
border: 0;
}

#wrapper{
margin: 0 auto 0 auto;
text-align: left;
width: 632px;
}

#header{
text-align: left;
float: left;
width: 630px;
}

#container{
margin: 0;
padding: 10px 0 0 0;
float: left;
width: 425px;
border: 3px solid #000000;
background: #ffffff url('http://www.mallorymaloney.com/wp-content/themes/versionthirtyeight/background2.gif');
}

.search{
margin: 0;
padding: 0 0 10px 0;
text-align: center;
}

.fourohfour{
padding: 0 10px 10px 10px;
text-align: left;
}

.updatesblog{
padding: 0 10px 0 10px;
text-align: center;
}

.navigation{
margin: 0;
padding: 0 10px 10px 10px;
}

.alignleftsmall{
margin: 0 0 10px 0;
padding: 0;
text-align: left;
float: left;
}

.alignleftbig{
margin: 0;
padding: 0 0 50px 0;
text-align: left;
}

.aligncentresmall{
margin: 0;
padding: 0 0 10px 0;
text-align: center;
}

.aligncentrebig{
margin: 0;
padding: 0 0 50px 0;
text-align: center;
}

.alignright{
margin: 0 0 10px 0;
padding: 0;
text-align: right;
float: right;
}

.page{
padding: 0 10px 0 10px;
margin: 0;
}

.post{
padding: 10px 10px 0 10px;
}

p.postmetadata{
margin: 0;
padding: 0 0 10px 0;
text-align: center;
}

.sidebar{
margin: 0 0 0 10px;
padding: 10px 0 0 0;
float: left;
width: 183px;
display: inline;
border: 3px solid #000000;
background: #ffffff url('http://www.mallorymaloney.com/wp-content/themes/versionthirtyeight/background2.gif');
}

.sidebar ul{
margin: 0;
padding: 0 5px 0 5px;
list-style-type: none;
}

.sidebar ul li{
padding: 0 0 5px 0;
}

.sidebar ul ul li{
margin: 0;
padding: 0 0 10px 0;
}

ul{
margin: 0;
padding: 0 0 10px 0;
list-style-type: none;
}

.comments-template{
margin: 0;
padding: 10px 0 0 0;
}

.comments-template ol{
margin: 0;
padding: 0;
list-style: none;
}

.comments-template li{
margin: 0 0 3px 0;
padding: 1px 0 1px 0;
}

.commentmetadata{
border: 1px solid #dedede;
background: #ffffff url('http://www.mallorymaloney.com/wp-content/themes/versionthirtyeight/background3.gif');
text-align: center;
font-size: 11px;
color: #000000;
}

.comments-template p.nocomments{
padding: 0;
}

blockquote{
margin: 10px 30px 20px 30px;
padding: 10px 10px 0 30px;
font-family: Verdana, Tahoma, Arial;
font-size: 11px;
color: #000000;
border: 1px solid #dcdcdc;
background: #ffffff url('http://www.mallorymaloney.com/wp-content/themes/versionthirtyeight/background4.gif');
}

input{
padding: 1px;
font-family: Verdana, Tahoma, Arial;
font-size: 11px;
font-weight: bold;
color: #000000;
border: 1px solid #dedede;
background: #ffffff url('http://www.mallorymaloney.com/wp-content/themes/versionthirtyeight/background3.gif');
}

textarea{
padding: 1px 1px 1px 30px;
font-family: Verdana, Tahoma, Arial;
font-size: 11px;
color: #000000;
border: 1px solid #dcdcdc;
background: #ffffff url('http://www.mallorymaloney.com/wp-content/themes/versionthirtyeight/background4.gif');
}

form{
margin: 1px;
padding: 1px;
}

#footer{
margin: 0;
padding: 0;
clear: both;
float: left;
width: 630px;
}

Direct URL: http://www.mallorymaloney.com/wp-content/themes/versionthirtyeight/style.css

And here's my site's URL, just in case it's needed: http://www.mallorymaloney.com/

Thank you so much in advance to anyone who has any tips! :)

And I wanted to instead make it laid out like this, with the sidebar sorta beside the header:
http://i46.tinypic.com/24fg3f6.gifHere's one idea:

<!doctype html public "-//W3C//DTD HTML 4.01//EN">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<style type="text/css" media="all">
* { margin: 0; }
html { background: white; color: black; font: 18px sans-serif; }
body > div { background: lime; }
h1 { float: right; width: 80%; background: pink; }
div div { background: tan; }
div div { float: left; width: 20%; }
body > div > p { margin: 0 0 0 20%; background: gold; }
</style>
<div>
<h1>Header</h1>
<div>
<h2>Sidebar</h2>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>

Thank you so much for the tip/code! I really appreciate it. ^^