Vertically aligning a div inside a div?

Question

What's a good way to vertically align a div inside another div, when the inner div has a static height? As to the height will be different sometimes. http://jsfiddle.net/daCt3/

HTML:

<div id="footer">
 <div id="footerLeft">
 <div id="copyright">
 <!-- <copy> -->Copyright MyCorp &copy; 2013<!-- </copy> -->
     <br>Some more random stuff
 </div>
 </div>
 <div id="footer-right">

 </div>
</div>

CSS:

/*-- FOOTER --*/

#footer {
    bottom:0px;
    width:100%;
    padding-bottom:20px;
    padding-top:0px;
    background-color:#2C2E31;
    border-top:#242426 solid 2px;
    position:fixed;
    height:100px;

}

#footerLeft {
    margin-top:50px;
    float:left;
    width:300px;
    background-color:red;
}

Answer 1

Floating boxes for sticky behavior, % units in margins for columned views is what most people use in their sites. Inspect google.org for an example.

Answer 2

One solution is described in an article here: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

I've updated your CSS to look something like this:

CSS:

#footer {
  height: 400px;
  overflow: hidden;

  /* styling */
  bottom:0px;             
  width:100%;
  background-color:#2C2E31;
  border-top: #242426 solid 2px;
  height: 100px;
  position: fixed;
}
#footer[id] {
  display: table;
  position: fixed;
}

#footerLeft {
  position: absolute;
  top: 50%;
} /* for quirk explorer only*/

#footerLeft[id] {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  position: static;
}

#copyright {
  position: relative; 
  top: -50%;

  /* styling */
  background: red;
  width: 300px;
} /* for quirk explorer only */

You can view an example of it here: http://jsfiddle.net/UbzcC/1/