how do I flip positions of the title and the header image?

I would like to change the postions of the header image and the title and #nav

I can’t seem to find the place to change the postion of the h1 and #nav to make it come AFTER the header.jpg

Cheers!

Josh

here is my blog:

https://www.jwebb.ca/blog/

here is my style sheet:

/* page layout */
html, body {
margin:0;
padding:0;
border:none;
}
body {
background: #f5f5f5 url(bg_col1.png) top center repeat-y;
}
#container {
margin:auto;
width:750px;
w\idth:700px;
\width:700px;
padding:10px 25px;
border:0;
}
/*
Banner image description:
Volcán de Las Arenas (Vulcan of the Sands). Eruption on february 2 1705,
now on his 300th birthday. View from Socorro Mountain vulcan.

Photo ID: #5282913,
Owner: Jose Mesa (https://www.flickr.com/photos/52537477@N00/5282913/)
Attribution license: https://creativecommons.org/licenses/by/2.0/

[ Note: To change the banner image, Just replace with a new image of size
480×270 and call it banner.jpg ]
*/
#bannertop {
position:relative;
display:block;
width:100%;
height:168px;
margin:10px 0 15px 0;
overflow:hidden;
border:1px #666 solid;
background: #fff url(banner.jpg) top center no-repeat;
}
#content {
position:relative;
float:left;
margin:0;
padding:0;
width:65%;
text-align:justify;
}
#sidebar {
position:relative;
margin:0;
margin-left:505px;
border:0;
}
.clearfix:after {
content: “.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

/* end page layout */

/* begin headlines */
#nav, h1, h2, h3, .paginate, #sidebar, #sidebar h2, #sidebar h3, p, #sidebar p, .storycontent, .storycontent ul, ol, ol li, .cmeta, #google, fieldset {
font-family:verdana, arial, sans-serif;
font-size:11px;
}
.paginate {
color:#ccc;
text-align:right;
font-weight:normal;
}
h1 {
font-size:14px;
/* font-weight:thin; */
margin:0;
}
#header h1 {
display:inline;
width:45%;
margin:9px 0;
float:left;
}
h2 {
margin:11px 0 0 0;
}
h3 {
margin:3px 0 0 0;
}
.post h3 {
border-bottom:1px solid #F0F8FF;
}
#sidebar, #sidebar h2, #sidebar h3 {
color:#888;
}

#sidebar h2, #sidebar h3 {
border-bottom:1px solid #F0F8FF;
color:#666!important;
}

#sidebar h3 {
margin-top:20px;
}
/* end headlines */

.meta, .feedback, .post-categories, .post-categories li {
font-family:verdana, arial, sans-serif;
font-size:11px;
}
.meta, .feedback {
text-transform: lowercase;
color:#999;
text-align:right;
border-top:1px solid ghostwhite;
margin:0 0 18px 0;
}
.post h3 a:hover {
border-bottom:none !important;
}
.post-categories, .post-categories li {
display:inline;
margin:0;
padding:0;
}
p, .storycontent, .storycontent ul {
line-height:1.5em;
color: #000;
margin:6px 0 9px 1px;
padding:0;
}
.storycontent ul {
margin-left:35px;
}
.storycontent ul li {
margin-bottom:0.75em;
}
input[type=text], textarea {
border:1px solid #bbb;
padding:2px;
font-family:”Courier New”, Courier, monospace;
font-size:12px;
}
textarea {
overflow:auto;
}
input[type=submit], input[type=reset], input[type=button] {
/* background:#eee; */
color:#222;
/* border:1px solid #bbb; */
margin-right:2px;
padding:1px;
font-family:verdana, arial, sans-serif;
font-size:11px;
}
input, select, textarea {
/* font-family:”Courier New”, Courier, monospace;
font-size:12px; */
vertical-align:middle;
}
input[type=text]:focus, textarea:focus {
background: #EEE8AA;
border:1px solid #999;
}

#nav {
width:55%;
vertical-align:middle;
float:left;
}
#nav ul {
float:right;
margin:5px 0;
padding:3px 0;
}

#nav ul li {
margin:0;
padding:0 0 0 3px;
display:inline;
list-style:none;
}
#header {
display:block;
margin:0 0 10px 0;
padding:0;
max-width:100%;
}
acronym, abbr {
border-bottom:1px solid #bbb;
cursor:help;
}
img, p img {
border:none;
}
tt, code, pre {
font-family:”Courier New”,Courier,monospace;
font-size:12px;
}
a {
color:#666666;
text-decoration:none;
}
a:hover {
color:#666666;
text-decoration: none;
border-bottom:1px solid #bbb;
}
#nav a:hover {
border-bottom:1px solid #1E90FF;
padding-bottom: 2px;
}

/* Begin Images */
p img {
padding:0;
max-width:100%;
}

img.centered {
display:block;
margin-left:auto;
margin-right:auto;
}
img.pic {
background:#fff;
border:1px solid #ccc;
}
img.alignright {
padding:4px;
margin:0 0 2px 7px;
display:inline;
}

img.alignleft {
padding:4px;
margin:0 7px 2px 0;
display:inline;
}

.alignright {
float:right;
}

.alignleft {
float:left;
}

h1 a, h1 a:hover, #sidebar p img a:hover {
text-decoration:none;
border:0;
}
div.imgcenter {
text-align:center;
}

div.image img, div.imgcenter img {
border:1px #ccc solid;
padding:4px;
margin:5px;
}
/* end images */

#content ul li, #sidebar ul li {
list-style:url(bullet.gif);
line-height: 1.5em;
}
/* alternate comment colors */
.color1 {background-color:#ffffff; padding:5px; margin:5px 0; border:0; }
.color2 {background-color:#f8f8f8; padding:5px; margin:5px 0; border:0; }

.cmeta {
color:#888;
}

blockquote { margin:0 10px; }

blockquote p { color:#777!important;
border-left:1px solid #bbbbbb;
text-align:left;
padding-left:10px;
background:transparent;
}

/* archive list */

.alt {
background-color: #f8f8f8;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
margin:15px 0;
padding:5px;
}
/*
.commentlist li, #commentform input, #commentform textarea {
font: 11px ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
}
*/
.commentlist li {
font: 11px ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
}

.commentlist li {
font-weight: bold;
}

.commentlist cite, .commentlist cite a {
font-weight: bold;
font-style: normal;
font-size: 11px;
}

.commentlist p {
font-weight: normal;
line-height: 1.5em;
text-transform: none;
margin:6px 0 3px 1px!important;
}
/*
#commentform p {
font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
}
*/
.commentmetadata {
font-weight: normal;
}
h3.comments, #comments h3 {
padding: 0;
margin: 40px auto 20px;
}