http://dev.metertech.co.uk/technologies/patents-and-licensing
On the page above you can see that the second column is pushed down a little from the top.
On a page resize the issue corrects itself.
All other pages, even those with the same number of <p>
tags for the .content
render the columns correctly.
I have no idea how I might get it to align properly. Any ideas?
Here are the styles I think you may find relevant.
.page .content {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}
.content p {
margin: 0 0 15px;
}
p {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
body {
font-size: 15.5px;
letter-spacing: 0.4px;
line-height: 2;
}