Question

Below is what my design looks like

however with a long title, it looks like

How might I avoid the overlap? I created a fiddle to allow you to work on this (if you prefer)

http://jsfiddle.net/xhp7Q/

Answer 1

You can put the comment link first and float it to the right. That way the header will flow around it:

http://jsfiddle.net/xhp7Q/1/

.comments {
  float: right;
  height: 30px;
  font-size: 26px;
  font-weight: bold;
  border: 5px solid #eee;
  color: #000;
  color: red;
}