Cronología Elizabeth

----------------------- PARTE CSS -----------------------

.cajacrono {
  margin: 1px;
  font-family: calibri;
  font-size: 12px;
  text-align: left;
  line-height: 100%;
  padding: 15px;
  width: 170px;
  margin-bottom: 20px;
  color: #0e170f;
  height: 150px;
  overflow: auto;
  background: #6f8557;
}

.cajacrono a {
  color: #d5cec8;
}

----------------------- PARTE HTML ----------------------

<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'><center><br><div style="width: 430px; padding: 20px; background: #0e170f; border: 5px double #6f8557; outline: 15px solid #d4cec8;"><div style="font-family: Poiret One; font-size: 40px; text-align: center; color: #d4cec8; margin-top: 10px; margin-bottom: 10px;">Nombre Apellido</div><a href="urldelexpediente" target="_blank" style="color: #6f8557; font-size: 10px; font-family: calibri; text-transform: uppercase; font-weight: bold; letter-spacing: 3px;">Clic para ver mi expediente</a>
<div style="width: 400px; height: 200px; background:url('http://i.imgur.com/3b5dhNa.png'); margin-bottom: 20px;"></div>
<table cellspacing="0"><td><div style="width: 180px; font-size: 14px; font-family: Poiret One; font-weight: bold; padding: 10px; line-height: 100%; color: #0e170f; background: #d5cec8; margin: 1px;">Tramas activas</div><div class="cajacrono">─ <a href="link a la trama">[i]Título de la trama[/i]</a> con [i]Nombre[/i].
─ <a href="link a la trama">[i]Título de la trama[/i]</a> con [i]Nombre[/i].
─ <a href="link a la trama">[i]Título de la trama[/i]</a> con [i]Nombre[/i].
</div></td><td><div style="margin: 1px; width: 180px; font-size: 14px; font-family: Poiret One; font-weight: bold; padding: 10px; line-height: 100%; color: #0e170f; background: #d5cec8;">Tramas inactivas</div><div class="cajacrono">─ <a href="link a la trama">[i]Título de la trama[/i]</a> con [i]Nombre[/i].
─ <a href="link a la trama">[i]Título de la trama[/i]</a> con [i]Nombre[/i].
─ <a href="link a la trama">[i]Título de la trama[/i]</a> con [i]Nombre[/i].
</div></td></table>
<div style="width: 380px; font-size: 14px; font-family: Poiret One; font-weight: bold; padding: 10px; line-height: 100%; color: #0e170f; background: #d5cec8; margin-bottom: 1px;">Tramas que me gustaría tener</div><div style="margin: 1px; font-family: calibri; font-size: 12px; text-align: justify; letter-spacing: 1px; line-height: 100%; padding: 15px; width: 370px; margin-bottom: 20px; color: #0e170f; height: 150px; overflow: auto; background: #6f8557;"><font style="color: #d5cec8; font-size: 10px; font-family: calibri; text-transform: uppercase; font-weight: bold; letter-spacing: 3px;">─ Título de la idea:</font> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt.

<font style="color: #d5cec8; font-size: 10px; font-family: calibri; text-transform: uppercase; font-weight: bold; letter-spacing: 3px;">─ Título de la idea:</font> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt.
</div></div><span style="font-size: 10px; font-weight: 700;  text-transform: uppercase; font-family: calibri; letter-spacing: 5px; position: relative; top: 10px;"><a style="color: #403B33;" href="http://thecaptainknowsbest.tumblr.com/">© HARDROCK</a></span><br><br></center>