title: CSS div to place image without interfering with other divs
body: <p>I am creating a web site for my church. Because they know of no web programmer members, I am taking care of it with my meager skills. My problem is merely one of placement. I am trying to place an image in the top-left of the page, but, no matter what I do, it interferes with the other div elements on the page. This is my current CSS:</p>
  
  <pre><code>body {
  background-color: #FFFFFF;
  font-size:12px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  }
  div#wrapper {
  width: 90%;
  background-color:#ffffff;
  margin-top: 50px;
  margin-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px;
  border: thin solid blue;
  }
  div#image {
  padding: 15px;
  margin: 0px;
  float: left;
  }
  div#header {
  padding: 15px;
  margin: 0px;
  text-align: center;
  }
  div#nav {
  width: 25%;
  padding: 10px;
  margin-top: 100px;
  float: left;
  }
  div#main {
  margin-left: 30%;
  margin-top: 100px;
  padding: 10px;
  }
  div#footer {
  padding: 15px;
  margin: 0px;
  border-top: thin solid blue;
  text-align: center;
  }
  </code></pre>
  
  <p>No matter how I define the image div, it always pushes the main, navigation, and header divs out of alignment. If I just place the image in another div, it still makes things move. </p>
  
  <p>Is there any way to have the page centered with 90% width and everything else in the wrapper div, and also have the image in the top-right corner? If it would require a different type of thing, can someone help me figure it out? Something that works only in one browser won't help, as I want it to work as seamlessly as possible for the most people.</p>