Side bar keeps going to bottom of page

Hi, I recently started a blog (swapping over from just a blogger account) and decided to use the economics theme by Anonymous.

Except I have put everything in and now for some reason the left side bar with the links and calendar has for some reason gone to the bottom of all my images. It seems okay IE but in firefox it keeps happening.

My blog address is https://sweetchilliphillyphotography.com/blog/

The CSS style sheet is

/*
Design by Free CSS Templates
https://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
background: #FFFFFF url(images/img01.jpg) repeat-x top left;
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size: 13px;
margin: 20px 0px 0px 0px;
padding: 0px;
color: #757575;
}

input, textarea {
width: 220px;
background: #FFFFFF url(images/img04.gif) repeat-x;
border-top: 1px solid #A3A3A3;
border-right: 1px solid #E5E5E5;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #D6D6D6;
font: normal 1em/normal “Trebuchet MS”, Arial, Helvetica, sans-serif;
color: #757575;
}

h1, h2, h3 {
color: #31363B;
letter-spacing: -1px;
}

h1, h1 a, h2, h2 a {
text-decoration: none;
}

h1 a:hover, h2 a:hover {
text-decoration: underline;
}

h1 {
font-size: 38px;
}

h2 {
font-size: 28px;
font-weight: normal;
}

h3 {
font-size: 16px;
}

p, ul, ol {
margin-top: 1.5em;
line-height: 190%;
}

ul, ol {
margin-left: 3em;
}

blockquote {
margin-left: 3em;
margin-right: 3em;
}

a {
color: #C11A00;
}

a:hover {
text-decoration: none;
}

a img {
border: none;
}

img.left {
float: left;
margin-right: 20px;
}

img.right {
float: right;
margin-right: 20px;
}

hr {
display: none;
}

#header {
width: 960px;
height: 453px;
margin: 0 auto;
}

/* Logo */

#logo {
width: 754px;
height: 120px;
margin: 0 auto;
padding: 2px;
}

#logo h1, #logo h2 {
margin: 0;
padding: 0;
text-transform: uppercase;
}

#logo h1 {
padding: 0px 0px 0 0px;
font-size: 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #31363B;
}

#logo h2 {
padding: 0px 0 0 25px;
font-size: 0px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #808080;
}

#logo p {
margin: 0;
padding: 0 0 0 20px;
line-height: normal;
font-size: 1.2em;
font-weight: bold;
}

#logo a {
color: #31363B;
}

#splash {
width: 754px;
height: 266px;
padding-bottom: 3px;
background: url(images/img04.jpg) no-repeat left top;
}

/* Header */

#header {
width: 754px;
margin: 0 auto;
}

#menu {
height: 60px;
width: 754px;
padding-left: 20px;
background: url(images/img02.jpg) no-repeat left top;
font-family: Arial, Helvetica, sans-serif;
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}

#menu li {
float: left;
}

#menu a {
display: block;
float: left;
padding: 20px 30px 15px 18px;
margin-right: 1px;
height: 30px;
background: url(images/img03.gif) no-repeat left 35%;
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
color: #FFFFFF;
}

#menu a:hover {
color: #FFFFFF;
}

#menu .current_page_item a {
background: none;
color: #FFFFFF;
}

/* Search */

#search {
float: right;
width: 260px;
margin: 0px;
margin-top: 10px;
}

#search fieldset {
border: none;
}

#search #s {
width: 160px;
height: 23px;
background: #FFDBE1;
border: 1px solid #F57F8C;
}

#search #x {
width: 40px;
background: #F74B61;
border-top: #F74B61 solid 1px;
border-bottom: #F74B61 solid 3px;
border-left: #F74B61 solid 1px;
border-right: #F74B61 solid 1px;
color: #FFDBE1;
}

#wrapper {
width: 754px;
margin: 0 auto;
background: url(images/img05.jpg) repeat-x left top;
}

/* Page */

#page {
width: 754px;
margin: 0 auto;
padding-top: 20px;
}

/* Content */

#content {
float: right;
width: 500px;
}

.post {
}

.post .title {
margin: 0;
padding: 10px 20px 10px 10px;
border-bottom: 1px dotted #D6C9BF;
}

.post h1.title {
padding: 5px 0 0 50px;
height: 40px;
font-size: 2.4em;
text-transform: lowercase;
}

.post .title a:hover {
text-decoration: none;
}

.post .entry {
margin: 0px;
padding: 20px 20px;
}

.post .meta {
height: 35px;
margin: 15px 0 20px 0;
padding: 15px 0 0 20px;
line-height: normal;
background: url(images/img05.jpg) repeat-x left top;
}

.post a {
color: #31363B;
}

/* Sidebar */

#sidebar {
float: left;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}

#sidebar li {
margin-bottom: 40px;
}

#sidebar li ul {
padding-left: 25px;
}

#sidebar li li {

margin: 0;
padding: 5px 10px;
border-bottom: 1px dotted #D6C9BF;
}

#sidebar li h2 {
margin: 0 0 1em 0;
padding: 15px 0 5px 25px;
height: 30px;
text-transform: lowercase;
font-size: 28px;
letter-spacing: -1px;
}

#sidebar li p {
padding: 0 20px;
}

/* Calendar */

#sidebar #calendar {
padding: 0;
}

#calendar caption {
}

#calendar table {
width: 100%;
padding: 0 20px;
text-align: center;
}

#calendar thead th {
border-bottom: 2px solid #F2F2F2;
border-top: 1px solid #F2F2F2;
}

#calendar tbody td {
padding: 5px 0;
border-bottom: 1px solid #F2F2F2;
}

#calendar tfoot td {
border-top: 1px solid #F2F2F2;
}

#calendar #prev {
text-align: left;
}

#calendar #next {
text-align: right;
}

#calendar a {
font-weight: bold;
}

/* Footer */

#footer {
clear: both;
width: 754px;
height: 50px;
margin: 0 auto;
background: #FFFFFF url(images/img01.jpg) repeat-x top left;
}

#footer p {
margin: 0;
line-height: normal;
padding: 35px 15px;
}

#footer a {
}

#footer .legal {
float: left;
}

#footer .credit {
float: right;
}

I don’t know much about CSS so not sure how to fix this.

Thanks