title: How to move a div without moving the other element in a footer
body: <p>I can't move the to icons on the right side of footer without moving the <p> tag holding my name.  Any ideas on how I might do this.....I just wanted to move the icons over left and down some, but <p> moves with it.</p>
  
  <pre><code>  &lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Tim Kennedy | Designer&lt;/title&gt;
  &lt;link href="CSS/main.css" rel="stylesheet" type="text/css"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="wrapper"&gt;
    &lt;header id="top"&gt;
      &lt;div id="apDiv1"&gt;Logo Image&lt;/div&gt;
  
      &lt;nav id="mainnav"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="index.html"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="pages/about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="pages/contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/header&gt;
    &lt;aside id="sidebar"&gt;SideBar Content
      &lt;h3&gt;What I Do:&lt;/h3&gt;
          &lt;p&gt;  
              Isdfndmsn sdfnsdf sdjksdfj ksdjksdf sjksfsd.
              sdflsdkflsdf.sdkfjksdfjfkds sdkfjsdkf skdfjksdfj sdkfjsdkfjsd skdfjskdfj skdfjskdfj skdfjskdfj skdfjskdjf.      
          &lt;/p&gt;
      &lt;h3&gt;Work Status:&lt;/h3&gt;
          &lt;p&gt;
              DFjkdsfj ksdjfksd skdfjksjdf ksdjfkdf ioeroew oeifodsf.  skdjfskdjf sdkfjsdkf skdfjksdjksd skd skdjksjd sdkjsd ksdjfksd ksdjds ksdshj.  ksdjfkk sdfkjsd ksdjfksd ksdjkds sdkjfkdsj skdjfkdsf sdkfjskdjf ksdjskdjf .
          &lt;/p&gt;
    &lt;/aside&gt;
    &lt;section&gt;
      &lt;h2&gt; Past Work:&lt;/h2&gt;
      &lt;ul id="gallery"&gt;
          &lt;li&gt;
              &lt;a href="Images/dummy-images (1)/dummy-200x200-Circus.jpg"&gt;
                  &lt;img src="Images/dummy-images (1)/dummy-200x200-Circus.jpg" width="200" height="200" alt=""/&gt;
                  &lt;p&gt;Placeholder Image #1&lt;/p&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="Images/dummy-images (1)/dummy-200x200-FairyLights.jpg"&gt;
                  &lt;img src="Images/dummy-images (1)/dummy-200x200-FairyLights.jpg" width="200" height="200" alt=""/&gt;
                  &lt;p&gt;Placeholder Image #2&lt;/p&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="Images/dummy-images (1)/dummy-200x200-Glass.jpg"&gt;
                  &lt;img src="Images/dummy-images (1)/dummy-200x200-Glass.jpg" width="200" height="200" alt=""/&gt;
                  &lt;p&gt;Placeholder Image #3&lt;/p&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="Images/dummy-images (1)/dummy-200x200-Map.jpg"&gt;
                  &lt;img src="Images/dummy-images (1)/dummy-200x200-Map.jpg" width="200" height="200" alt=""/&gt;
                  &lt;p&gt;Placeholder Image #4&lt;/p&gt;
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/section&gt;
    &lt;footer&gt;
      &lt;div id="social-media"&gt;
          &lt;a href="http://twitter.com"&gt;&lt;img src="" alt="Twitter Logo" class="social-icon"&gt;&lt;/a&gt;
          &lt;a href="http://facebook.com"&gt;&lt;img src="" alt="Facebook Logo" class="social-icon"&gt;&lt;/a&gt;
      &lt;/div&gt;
          &lt;p&gt;&amp;copy; 2014 Tim Kennedy&lt;/p&gt;
    &lt;/footer&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  
      @charset "UTF-8";
  body {
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      color: #151515;
      font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
      background-color: #FFFFFF;
      max-width: 960px;
  }
  #wrapper {
      width: 100%;
      min-width: 740px;
      max-width: 1000px;
      margin-right: auto;
      margin-left: auto;
  }
  #top {
      height: 95px;
      border: thin solid #000000;
  }
  #mainnav {
      float: right;
      margin-top: 50px;
      margin-right: 150px;
  }
  #mainnav ul li {
      text-decoration: none;
      display: inline-block;
      float: left;
      margin-left: 30px;
  }
  #mainnav ul {
      margin-right: 31px;
  }
  
  #apDiv1 {
      height: 70px;
      width: 70px;
      margin-top: 15px;
      margin-left: 45px;
      position: absolute;
      z-index: 1;
      border: thin solid #000000;
  }
  #sidebar {
      width: 25%;
      margin-top: 60px;
      display: block;
      margin-left: 10px;
      border: thin solid #000000;
      float: left;
      min-width: 200px;
      padding-left: 5px;
      padding-top: 5px;
      padding-right: 5px;
      padding-bottom: 5px;
  }
  section {
      width: 60%;
      float: right;
      text-align: center;
      margin-top: 60px;
  }
  #gallery {
      list-style-type: none;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
  }
  
  
  
  
  #gallery li {
      width: 35%;
      margin-top: 5%;
      margin-right: 5%;
      margin-bottom: 5%;
      margin-left: 5%;
      float: left;
      min-width: 200px;
  }
  
  img {
      max-width: 100%;
  }
  
  footer {
      clear: both;
      height: 34px;
      padding-top: 10px;
      border: thin solid #000000;
      padding-bottom: 10px;
  }
  #footer p {
      margin-bottom: 15px;
  }
  .social-icon {
      width: 20px;
      height: 20px;
      margin-top: 0px;
      margin-bottom: 0px;
      margin-right: 5px;
      margin-left: 5px;
      float: right;
  }
  #social-media {
      margin-top: 2px;
  }
  footer p {
      text-align: center;
  }
  </code></pre>