title: trying to get div to float next to another div
body: <p>I have two divs featureText and skillsText one right after the other, I am trying to get the second one to float right of the next one instead of stacking, I have tried position relative on the second one with float left to no avail, the container itself is positioned relative. When I inspect the first div it shows to be super wide yet I have a width set and margins and paddings have been set to 0 to see if that was the problem. This is such a noob problem, but I need help.</p>
  
  <p>live <a href="http://anderskitson.ca/update" rel="nofollow">site</a></p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Portfolio of Anders Kitson&lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
      &lt;!--[if lt IE 9]&gt;
      &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
      &lt;link rel="stylesheet" href="css/normalize.css"&gt;
      &lt;link rel="stylesheet" href="css/styles.css"&gt;
      &lt;script type="text/javascript" src="//use.typekit.net/lfr7txf.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;try{Typekit.load();}catch(e){}&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="container"&gt;
      &lt;header&gt;
          &lt;h1&gt;ASK&lt;/h1&gt;
          &lt;h2&gt;Anders Samuel Kitson, front end web developer.&lt;/h2&gt;
      &lt;/header&gt;
      &lt;div id="featureText"&gt;
          &lt;h1&gt;Recent Works&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div id="skillsText"&gt;
          &lt;h1&gt;Super hero skills&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div id="siteThumbs"&gt;&lt;!--not sure if this is appropriate use of the section tag--&gt;
          &lt;div id="springmethod"&gt;
              &lt;a href="#"&gt;&lt;h1 class="springmethod"&gt;Springmethod.com&lt;/h1&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="goodmorning"&gt;
              &lt;a href="#"&gt;&lt;h1 class="goodmorning"&gt;goodmorningmoon.ca&lt;/h1&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>/*variables*/
  /*shared styles*/
  #container {
    width: 960px;
    max-width: 90%;
    border: solid 0px #000;
    margin: auto;
    position: relative; }
  
  header h1 {
    background: url("../images/ask.gif");
    width: 97px;
    height: 96px;
    text-indent: -9000px; }
  header h2 {
    font-family: "brandon-grotesque",sans-serif;
    font-weight: 300;
    font-size: 2.5em; }
  
  #featureText {
    margin-top: 70px;
    margin-bottom: 20px;
    width: 24%;
    background: red; }
    #featureText h1 {
      font-family: "brandon-grotesque",sans-serif;
      font-size: 2.5em;
      font-weight: 700; }
  
  #skillsText {
    width: 28%;
    background: aqua;
    position: relative;
    float: left; }
    #skillsText h1 {
      font-family: "brandon-grotesque",sans-serif;
      font-size: 2.5em;
      font-weight: 700;
      margin-top: -10px; }
  
  #siteThumbs {
    position: relative;
    float: left;
    width: 960px; }
    #siteThumbs .springmethod {
      background: url("../images/springmethod.jpg") no-repeat;
      width: 318px;
      height: 241px;
      text-indent: -9000px;
      padding: 0;
      margin: 0; }
    #siteThumbs .goodmorning {
      background: url("../images/goodmorning.jpg") no-repeat;
      width: 318px;
      height: 241px;
      text-indent: -9000px;
      padding: 0;
      margin: 0; }
  
  #siteThumbs a:hover .springmethod {
    background: url("../images/springmethod.jpg") 0 -241px no-repeat; }
  #siteThumbs a:hover .goodmorning {
    background: url("../images/goodmorning.jpg") 0 -241px no-repeat; }
  
  #springmethod {
    width: 318px;
    position: relative;
    float: left; }
  
  #goodmorning {
    width: 318px;
    position: relative;
    float: left; }
  
  /*media queries*/
  /* Smartphones (portrait and landscape) */
  @media only screen and (min-width: 0px) and (max-width: 767px) {
    header h2 {
      font-size: 1.5em; } }
  </code></pre>