Iframe hides styling of container

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 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.

Answer 2

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 3

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>