title: Why will my other child div not move on hover?
body: <p>So I have this situation :</p>
  
  <pre><code>&lt;div class="relations-container"&gt;
      &lt;div class="relations"&gt;
      &lt;ul&gt;
        &lt;? while($relatedVideo = mysql_fetch_array($relatedVideos)){ ?&gt;
      &lt;li&gt;&lt;p&gt;&lt;a href="?prodId=&lt;?=$relatedVideo['recProductId']?&gt;"&gt;&lt;?
              =$relatedVideo['recTitle']?&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
        &lt;? } ?&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
           &lt;? } ?&gt;
       &lt;div class="relations-button"&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So I have my container div "relations-container", which contains my 2 child divs "relations" and "relations-button"</p>
  
  <p>my css is as follows :</p>
  
  <pre><code>.relations-container{
  height:82px;
  width:auto;
  position:relative;
  bottom:456px;
  float:left;
  }
  
  .relations {
  
  width:720px;
  height:50px;
  background: rgb(255, 255, 255);
  border:dotted #333 1px;
  float:left;
  position:relative;
  
  }
  
  .relations ul {
      list-style: none;
  }
  .relations ul li{
  margin-left:10px;
  width:20%;
  float:left;
  }
  
  .relations ul li p {
  
  font-family: verdana;
  font-size:10px;
  color:#666;
  }
  
  .relations-button{
  height:30px;
  width:30px;
  background-color:rgb(0, 51, 153);
  float:left;
  
  }
  </code></pre>
  
  <p>What I am trying to achieve here is when I hover over the div "relations-button" this moves the div "relations" down by 50px. 
  so I thought this would be :</p>
  
  <pre><code>.relations-button:hover + .relations{
  position:relative;
  top:50px
  }
  </code></pre>
  
  <p>Does anyone know why the div isnt moving ? </p>