Separating banner from text

I'm trying to separate a text header from a banner for an eBay listing. Here's the code:

body {
  background-color: #cccccc;
}

#banner {
  position: top;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 275px;
  z-index: 1;
}

<div id="banner">
  <img src="http://i592.photobucket.com/albums/tt6/7godsgaming/download%20-%20Edited_zpsx0kaucry.jpg" width="100%">
</div>

<h1 style="font-family:helvetica">[Header text]</h1>

I've tried to add line breaks before the header to separate the header from the banner, but this isn't consistent across all viewing monitors. I converted px to em in the "height" and added the four breaks, but this doesn't work either. Thanks so much.

Solution

Try implementing margin-top.

<style>
  body {
    background-color: #cccccc;
  }
  #banner {
    position: top;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 275px;
    z-index: 1;
  }
  
  h1{
    margin-top:150px;}
</style>
<div id="banner">
  <img src="http://i592.photobucket.com/albums/tt6/7godsgaming/download%20-%20Edited_zpsx0kaucry.jpg" width="100%">
</div>

<h1 style="font-family:helvetica">[Header text]</h1>

Update: You can also use percentages for margin-top to get a more consistent view on different browsers. Alternatively you can just put it into one div. You then wouldn't need to specify margin-top.

  body {
    background-color: #cccccc;
  }
  #banner {
    position: top;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 275px;
    z-index: 1;
  }

<div id="banner">
  <img src="http://i592.photobucket.com/albums/tt6/7godsgaming/download%20-%20Edited_zpsx0kaucry.jpg" width="100%">


<h1 style="font-family:helvetica">[Header text]</h1>
  
  </div>