Iframe hides styling of container - html

Question

I am designing a site that has a semi-transparent container for the content, which is divided into two columns. My CSS:
#content {
width: 80%; margin-left: 10%; margin-top: 25px; margin-bottom: 25px;
background-color: rgba(256,256,256,.6); box-shadow: 0 0 6px}
#sidebox {
width: 25%; padding-left: 2.5%; padding-right: 2.5%; float: right;
background-color: #FFF}
#main {
width: 65%; padding-left: 2.5%; padding-right: 2.5%; float: left}
The HTML for embedding the video:
<div id="content">
<div id="sidebox">...</div>
<div id="main">
<div class="post">
<a name="song" />
<p class="title">New song!</p>
<p class="date">Posted January 16, 2013</p>
<center>
<iframe width="480" height="360"
src="http://www.youtube.com/embed/tF7DQBlYQGM"
frameborder="0" allowfullscreen style="margin-left: -3%" />
</center>
</div>
</div>
</div>
I put some static stuff in the sidebox and then make news posts to the main div. If I embed a video in an iframe in main, then the semi-opaque background from content (as well as the drop-shadow) doesn't render. I found a lot of solutions geared towards what to do if you want to overlay a div on an iframe, but nothing about putting an iframe in a div container screwing up the styling of that container.
The website, which currently has the video embedded: http://physics.nyu.edu/~dzb212/music_index.html

Answer 1

I'm not 100% sure of the reasoning behind it, but if you add display:inline-block to your content style it seems to work on my end

Answer 2

Try this...
html content :
<div id="content">
<p> content div </p>
<div id="sidebox">...</div>
<div id="main">
<div class="post">
<p> main div </p>
<a name="song" />
<p class="title">New song!</p>
<p class="date">Posted January 16, 2013</p>
<center>
<iframe width="480" height="360"
src="http://www.youtube.com/embed/tF7DQBlYQGM"
frameborder="0" allowfullscreen style="margin-left: -3%" />
</center>
</div>
</div>
</div>

Answer 3

I noticed some strange behaviors arising from my use of <a href="blah" /> kinds of statements in my HTML. I was under the impression that <[stuff] /> was the same as <[stuff]></[stuff]>, and that it was just a convenient shorthand for an element that contained nothing else. However, I don't know if this is true, and I found that huge chunks of text were unexpectedly being moved into <a> elements. I therefore changed
<iframe width="480" height="360" src="http://www.youtube.com/embed/tF7DQBlYQGM"
frameborder="0" allowfullscreen style="margin-left: -3%" />`
to
<iframe width="480" height="360" src="http://www.youtube.com/embed/tF7DQBlYQGM"
frameborder="0" allowfullscreen style="margin-left: -3%"></iframe>
and all seems to be displaying correctly. I no longer even need display: inline-block in the content styling.
Thanks for your help.