There's an undesired space appears when using 'float'

div#showCode_container {
  float: left;
  font: bold 14px arial;
}

#editor {
  width: 500px;
  min-height: 400px;
  color: #fff;
  background-color: mediumblue;
}

#lineNumber {
  min-height: 400px;
  padding: 0 5px;
  float: left;
  color: #333;
  background-color: #ff9000;
}

#codeArea {
  min-height: 500px;
  float: left;
}

#codeArea:after {
  clear: both;
}

<div id="showCode_container">
  <h3> Show the code: </h3>
  <div id="editor">
    <div id="lineNumber">1<br/>2<br/>3</div>
    <pre id="codeArea">A text</pre>
  </div>
</div>