image position in div - css

Question

I'm banging my head against the wall trying to understand why my image is not moving into the div that I'm specifying, but rather straddles the lower border. I don't see any styling conflicts in looking over the elements with Firebug. I'll also throw out that my CSS position skills are not anywhere near where I would like them.
I want to place the image to the left of the text. So what am I doing wrong?
My html:
...
<div id="container">
<div class="header">
<h1 id="mgtitle">Pierce County, Washington<br/>
Master Gardener Foundation</h1>
<img src="images/flower-1.jpg" height="75" id="hdr-img" />
</div>
<div class="mainbody">
<div id="menu">
<ul> ...
My CSS:
#container {
width: 900px;
// max-height: 750px;
margin: 10px auto;
border: 1px solid #fff;
background-color: #ffffff;
box-shadow: 0px 2px 7px #292929;
-moz-box-shadow: 0px 2px 7px #292929;
-webkit-box-shadow: 0px 2px 7px #292929;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.header {
height: 130px;
border: 1px solid black;;
background-color: #ffffff;
background-image: url("http://www.pc-wa-mg-conf.org/images/Flower-Backgrounds-8- scaled.jpg");
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
text-align:center;
}
#hdr-img {
position: relative;
display: block;
margin-top: 0%;
margin-left: 0;
/* margin-right: auto; */
/*z-index: 1;*/
}
#mgtitle {
font-family: 'Great Vibes', cursive;
font-size: 2.5em;
}

Answer 1

First, you need to move the image above the <h1> in the code in order to place it on the left:
<div class="header">
<img src="images/flower-1.jpg" height="75" id="hdr-img" />
<h1 id="mgtitle">Pierce County, Washington<br/>
Master Gardener Foundation</h1>
</div>
Then, change display: block of #hdr-img to display: inline-block.
Finally, add display: inline-block to a new h1 CSS class:
h1 {
display: inline-block;
}
Fiddle: http://jsfiddle.net/hxX6u/1/

Answer 2

You need to change the image to display:inline-block because if it is display:block it will be pushed onto its own line. Also, you need to put the image inside the <h1> tag, since the <h1> is set to display:block otherwise it will push the image to its own line. After those changes, the only problem is the height you have set on the header. You can shrink the contents and make them fit in the header, by changing the line-height or shrinking the image, etc. I took the height off of the header to allow it to adjust according to the height of its contents.
CSS:
#container {
width: 900px;
// max-height: 750px;
margin: 10px auto;
border: 1px solid #fff;
background-color: #ffffff;
box-shadow: 0px 2px 7px #292929;
-moz-box-shadow: 0px 2px 7px #292929;
-webkit-box-shadow: 0px 2px 7px #292929;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.header {
border: 1px solid black;;
background-color: #ffffff;
background-image: url("http://www.pc-wa-mg-conf.org/images/Flower-Backgrounds-8- scaled.jpg");
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
text-align:center;
}
#hdr-img {
position: relative;
display: inline-block;
margin-top: 0%;
margin-left: 0;
/* margin-right: auto; */
/*z-index: 1;*/
}
#mgtitle {
font-family: 'Great Vibes', cursive;
font-size: 2.5em;
}
http://jsfiddle.net/NABjE/