title: Positioning embedded video via CSS
body: <p>I am trying to reproduce a layout similar to Youtube to practice some of the things I've learned just recently. How can I reposition an embedded Youtube video? </p>
  
  <p>I tried making a parent div for the embedded video with <code>display: relative</code>, but it's not budging.</p>
  
  <p><a href="http://jsfiddle.net/GztRt/" rel="nofollow">http://jsfiddle.net/GztRt/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link type="text/css" rel="stylesheet" href="bluetube.css" /&gt; &lt;title&gt; Webpage #3 &lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="header"&gt;                       &lt;!-- Top header with logo, search bar, upload button--&gt;
      &lt;a href="http://www.youtube.com" id="logo"&gt;
          &lt;div id="blue"&gt; Blue&lt;/div&gt;
          &lt;div id="tube"&gt;Tube&lt;/div&gt;
      &lt;/a&gt;
      &lt;form  style="display: inline; width: 200px;" name="searchbar" action="searchinput.asp" method="get"&gt;
              Search &lt;input type="text" name="searchinput"&gt;
              &lt;input type="submit" value="Submit"&gt;
      &lt;/form&gt;
      &lt;a href"http://www.amazon.com" id="uploadparent"&gt;
          &lt;div id="upload"&gt;Upload&lt;/div&gt;
      &lt;/a&gt;
  
  
  &lt;/div&gt;
  
  
  &lt;div id="videobox"&gt;
      &lt;object width="420" height="315"&gt;
      &lt;param name="movie" value="http://www.youtube.com/v/dQw4w9WgXcQ?    hl=en_US&amp;amp;version=3"&gt;&lt;/param&gt;&lt;param name="allowFullScreen" value="true"&gt;
      &lt;/param&gt;&lt;param name="allowscriptaccess" value="always"&gt;
      &lt;/param&gt;&lt;embed src="http://www.youtube.com/v/dQw4w9WgXcQ?hl=en_US&amp;amp;version=3" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"&gt;
      &lt;/embed&gt;&lt;/object&gt;
  
  &lt;/div&gt;
  
  &lt;div id="column_box_right"&gt;&lt;/div&gt;     &lt;!-- Related Videos spans the Right side! --&gt;
  &lt;div id="column_box_left&gt;ddddddddddddddddddddddd&lt;/div&gt;      &lt;!-- column spans the left side! --&gt;
  &lt;div id="vidinfo"&gt;&lt;/div&gt;
  
  &lt;div id="footer"&gt;&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p> </p>
  
  <p>CSS:</p>
  
  <pre><code>html body {
  width: 100%;
  }
  
  #header {
      height: 35px; 
      background-color: grey;
      margin-top: -6px;
      position: relative;
      margin-left: -7px
      overflow: auto;
      min-width: 1000px;
  }
  
  #blue {
      height: 35px;
      width:  60px;
      background-color: grey;
      border-radius: 4px;
      text-align: center;
      color: blue;
      display: inline-block;
      font-size: 20px;
      font-family: Verdana;
  }
  #logo {
      float: left;
      margin-right: 14%;
  }
  #tube {
      height: 35px;
      width:  60px;
      background-color: blue;
      border-radius: 4px;
      text-align: center;
      display: inline-block;
      color: white;
      font-size: 20px;
      font-family: Verdana;
  }
  #upload {
      height: 30px;
      width: 100px;
  }
  </code></pre>