Why can't I position the Player?

I'm trying to put this media player between some containers of text, yet the Player seems to overlap the container no matter what I try.
Here is a simplified version of what code is on the page:

<div class="column2">

<div class="container1">
TEXT text TEXT 
</div>

<div id="player">
<script type="text/javascript">
Etc. etc. etc.
var so= new SWFObject("player.swf", "player", "620", "470", "9", "#000000");
var video_id= get_id();
</script></div>

</div>//column2//

Code (markup):

And the CSS:

#player {
  border: 2px solid #800000;
  border-width: 1px 1px 1px 1px;
  width:600px;
  height:500px;
  margin:0px 0px 0px 0px; 
  padding: 0px 0px 0px 0px;
  background-color:#ffffff;
}

Code (markup):

I'd like the Player below the conatiner of text, with a bit of a margin in between. When I try to move the player down, so it doesn't partially overlap with the Container 1 text, (by adding 100px to the top margin of the Player, for example), it just moves the Player downward, but the border of #recorder stays overlaped. Any help will be appreciated.

 

U must use position:relative; property between parent and child elements mate . google about it