text too close to iframe-how to get margin/border

Question

I'm trying to get the paragraph of Lorem Ipsum to have about 30px of margin between it and the spotify iframe insert. I have tried many things, and searched but cannot seem to get it to work like I would like. Here's a link to my codepen. http://codepen.io/ChrisPetrick/pen/gpzRzY

.nickDrakeHorn {
  border: 1px solid black;
  overflow: hidden;
  height: auto;
  width: 100%;
  background-color: #FF99CC;
}
#iframe {
  margin-right: 30px;
  margin-top: 30px;
  margin-left: 20px;
}

#trackInfo1 {
  float: left;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 1px;
  margin-bottom: 1px;
  font-size: 20px;
  width: 65%;
}
#commentary1 {
  font-size: 20px;
  width: 95%;
  padding-left: 30px;
}

 <div class="box nickDrakeHorn">
   <div id="iframe">
     <iframe src="https://embed.spotify.com/?uri=spotify%3Atrack%3A4XFZey4zmgQV551M0hfaUg" width="300" height="380" align="left" border-right="30px"></iframe>
   </div>
       <div id="trackInfo1">
            <hr />
            <p><strong>Track: <q>Horn</q></strong></p>
            <p><strong>Artist: Nick Drake </strong></p>
            <p><strong>Original Album: Pink Moon </strong></p>
            <p><strong>Year: 1972 </strong></p>
            <hr />
       </div>

       <div id="commentary1">
            Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong.
            Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, Blah Blah Blah dolor sit amet nulla ham qui sint exercitation
            eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod
            commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong.  Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod
            commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong.Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod
            commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong.Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod commodo,
            chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong.
            Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong.
            Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit,
            dolore aliqua non est magna in labore pig pork biltong.  Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit,
            dolore aliqua non est magna in labore pig pork biltong.
       </div>
 </div>

Answer 1

I've forked your CodePen with my solution in case you want to fiddle with it.

http://codepen.io/dharshba/pen/YXLQBb

.nickDrakeHorn {
  border: 1px solid black;
  overflow: hidden;
  height: auto;
  width: 100%;
  background-color: #FF99CC;
  padding:20px;  
}

iframe {
  float:left;
  margin-right:30px;
  margin-bottom:20px;
}

#trackInfo1 {
  margin-top: 1px;
  margin-bottom: 1px;
  font-size: 20px;
  width:100%;
}

#commentary1 {
  font-size: 20px;
}

Some of the problem came from an awkward mix of pixels and percentages. Since your iframe width was in pixels, you couldn't be sure where the 65% width on the #trackInfo1 would end up. But by removing the float:left from that div, it now takes up 100% of what is left after the Spotify iframe, instead of dropping down if the iframe took up more than 35% of the space, for a much more predictable result.

The bottom margin of 20px on the iframe is what happened to look right as a result of where the lines in your paragraph ended up. If you change the font size or line-height, that may need to be adjusted.

I also think that you had some extra clutter trying to keep individual elements away from the borders with their own margins and padding. Placing padding on the outer div (.nickDrakeHorn) is an easier way to keep everything on the inside from getting too close to the edges.

Finally, the div wrapping the iframe didn't seem to do much, so I took it out of the HTML and applied the styles directly to the iframe tag.

Answer 2

Change this:

#iframe {
  margin-right: 30px;
  margin-top: 30px;
  margin-left: 20px;
}

To this:

iframe {
  margin-right: 30px;
  margin-top: 30px;
  margin-left: 20px;
}

Iframe is an element so you would call it by iframe now if your iframe had and id like this:

<iframe src="https://embed.spotify.com/" id="iframe"></iframe>

Then the #iframe css call would work.