title: CSS3 vertical alignment
body: <p>I'm creating a server list and when i'm echoing out the servers i want the hr tag and the IP to be at the bottom of the div, How do i do that?</p>
  
  <p>Heres my code:</p>
  
  <pre><code>&lt;div id='serverList'&gt;
  &lt;div id='serverRank'&gt;
      &lt;b&gt;Rank&lt;/b&gt;&lt;hr /&gt;&lt;span&gt;1&lt;/span&gt;
  &lt;/div&gt;
  &lt;div id='serverInfo'&gt;
      &lt;a href='?p=view&amp;s=".$row['id']."'&gt;".htmlentities($row['server_name'])."&lt;/a&gt;
  &lt;hr /&gt;
  ".htmlentities(substr($row['server_description'],0,250))."
  &lt;div id='serverListBottom' valign='bottom'&gt;
  &lt;hr /&gt;
  &lt;span id='frontInput'&gt;IP: ".$row['server_ip']."&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And my CSS code:</p>
  
  <pre><code>#serverList {
  height:auto;
  width:550px;
  -webkit-box-shadow: 7px 7px 20px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    7px 7px 20px rgba(50, 50, 50, 0.75);
  box-shadow:         7px 7px 20px rgba(50, 50, 50, 0.75);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  margin-left:10%;
  margin-right:auto;
  text-decoration:none;
  text-align:left;
  min-height:100px;
  height:170px;
  margin-bottom:40px;
  padding:0px;
  }
  #serverList a {
  font-size:20px;
  font-weight:bold;
  text-decoration:none;
  color:#222222;
  }
  #serverList a:hover {
  font-size:20px;
  font-weight:bold;
  text-decoration:none;
  color:#444444;
  }
  #serverRank{
  border:solid 3px #F2F200;
  padding:5px;
  padding-left:10px;
  float:left;
  width:50px;
  text-align:center;
  -moz-border-radius-bottom-right: 20px;
  -webkit-border-bottom-right-radius: 20px;
  border-bottom-right-radius: 20px;
  -moz-border-radius-top-left: 20px;
  -webkit-border-top-left-radius: 20px;
  border-top-left-radius: 20px;
  -webkit-box-shadow: 4px 4px 10px rgba(240, 240, 50, 0.5);
  -moz-box-shadow:    4px 4px 10px rgba(240, 240, 50, 0.5);
  box-shadow:         4px 4px 10px rgba(240, 240, 50, 0.5);
  }
  #serverListBottom {
  margin-bottom:0px;
  }
  #serverInfo {
  float:right;
  width:450px;
  }
  #frontInput {
  color: rgb(0, 0, 0);
  font-size: 14px;
  padding: 2px;
  text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);
  -webkit-border-radius-left: 5px;
  -moz-border-radius-left: 5px;
  border-radius-left: 5px;
  background: rgb(219, 219, 219);
  background: -moz-linear-gradient(90deg, rgb(219, 219, 219) 30%, rgb(240, 240, 240) 50%);
  background: -webkit-linear-gradient(90deg, rgb(219, 219, 219) 30%, rgb(240, 240, 240) 50%);
  background: -o-linear-gradient(90deg, rgb(219, 219, 219) 30%, rgb(240, 240, 240) 50%);
  background: -ms-linear-gradient(90deg, rgb(219, 219, 219) 30%, rgb(240, 240, 240) 50%);
  background: linear-gradient(0deg, rgb(219, 219, 219) 30%, rgb(240, 240, 240) 50%);
  -webkit-box-shadow: -1px 1px 1px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    -1px 1px 1px rgba(50, 50, 50, 0.75);
  box-shadow:         -1px 1px 1px rgba(50, 50, 50, 0.75);
  }
  #frontInput:hover {
  cursor:pointer;
  }
  </code></pre>
  
  <p>You might be able to look in your head what this looks like, But what do i have to do on the #serverListBottom in order to make it be on the bottom of the #serverList div?</p>