title: Cannot get css to move my little text box into center
body: <p>I am trying to get a little box into the center of my screen, I had just text centered fine and just floated my aside, but I added a little box to make my text more visible using opacity. Now the text and the translucent box it sits on is over my aside and float won't work and margins leave like a weird box where the text would be without the margin's. Am I doing something wrong here or how do I fix it? PS i am using a 'technique' i guess from w3schools website it is in my comment later.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="myLinks"&gt;
          &lt;aside class="myLinks"&gt;
              &lt;nav class="myLinks"&gt;
                  &lt;a href=""&gt; content &lt;/a&gt; &lt;br/&gt; &lt;br/&gt;
                  &lt;a href=""&gt; content &lt;/a&gt; &lt;br/&gt; &lt;br/&gt;
                  &lt;a href=""&gt; content &lt;/a&gt; &lt;br/&gt; &lt;br/&gt;
                  &lt;a href=""&gt; content &lt;/a&gt; &lt;br/&gt; &lt;br/&gt;
                  &lt;a href=""&gt; content &lt;/a&gt; &lt;br/&gt; &lt;br/&gt;
                  &lt;a href=""&gt; content &lt;/a&gt; &lt;br/&gt; &lt;br/&gt;
              &lt;/nav&gt;
          &lt;/aside&gt;
      &lt;/div&gt;
      &lt;div class="homePageContent"&gt;
          &lt;div class="transparency"&gt; &lt;!-- http://www.w3schools.com/css/css_image_transparency.asp --&gt;
          &lt;h2&gt; &lt;em&gt; Hello, &lt;/em&gt; &lt;/h2&gt;
           &lt;em&gt; &lt;p&gt; co &lt;br/&gt;
  
          n &lt;br/&gt;
  
          t&lt;br/&gt;
  
          e &lt;br/&gt;
  
          n &lt;br/&gt;
  
          t &lt;br/&gt;
  
          content &lt;br/&gt;
  
          content &lt;br/&gt;
  
          content &lt;br/&gt;
  
          content &lt;br/&gt;
  
          content&lt;br/&gt;
  
          content &lt;br/&gt;
  
          content&lt;/p&gt; &lt;/em&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>     .myLinks{
      background: -webkit-linear-gradient(45deg, #0c64e8, #989898); /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(45deg, #0c64e8, #989898); /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(45deg, #0c64e8, #989898); /* For Firefox 3.6 to 15 */
      background: linear-gradient(45deg, #0c64e8, #989898); /* Standard syntax */
      padding-left: 5px;
      width:120px;
      border-color: #323232; 
      border-style: double;
      float:left;
  }
  .homePageContent{
      font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
      width:400px;
      height:530px;
      border:1px solid gray;  
  }
  .transparency{
      width: 400px;
      height: 530px;
      margin: 0px;
      background-color: #ffffff;
      border: 1px solid black;
      opacity: 0.4;
      filter: alpha(opacity=60);
  }
  </code></pre>