What am I seeing here? I do not mind the rest of the paragraphs do not line up, but the top ones must. What am I missing?

Browsers Fx 19 and Chrome 24 full screen on OSX Mountain Lion

**NOTE:** it goes away in a jsfiddle due to the normalised css that is inserted automatically

[JSFIDDLE without normalised CSS](http://jsfiddle.net/mplungjan/AsMH9/show/)
![enter image description here](https://i.stack.imgur.com/8Tik2.png)

```
<!DOCTYPE html>
<html>
<head>
<style>
#multicolumn { 
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
 column-count:3; 
-moz-column-gap: 10px;
-webkit-column-gap: 10px;
column-gap: 10px;
-moz-column-rule: 1px solid #000;
-webkit-column-rule: 1px solid #000;
column-rule:1px solid #000;
}
</style>
</head>
<body>
<div id="multicolumn"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla lorem, tincidunt in pulvinar non</p>
<p>Suspendisse est odio, porttitor non semper porttitor, sagittis in enim. Aenean mollis elit dapibus</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
<p>Etiam imperdiet suscipit odio, posuere ultrices diam porttitor nec. In tincidunt iaculis neque</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porta consectetur sapien, </p>
<p>Donec tortor mauris, congue sit amet imperdiet sed, vehicula vel eros.</p>
<p>Curabitur porttitor mattis felis et placerat. Nulla facilisi. Curabitur varius imperdiet sapien,</p>
<p>in vulputate quam auctor id. In quis eros eget sapien dignissim porttitor.</p>
<p> In hac habitasse platea dictumst. Nulla ut lorem sed felis blandit pretium.</p>
<p> Donec eget turpis ac ante gravida aliquet at nec magna.</p>
<p> Curabitur eleifend massa id sapien iaculis scelerisque. </p>
<p>Sed interdum, sapien ac laoreet tempus, orci turpis tristique sapien, </p>
<p>at ultrices dolor nulla eget dui. Vivamus sit amet turpis et erat vehicula tincidunt. Etiam a sodales neque.</p>
</div>
</body>
</html>

```