Menu
I noticed that CSS columns in Google Chrome and IE 10 don't always align uniformly at the top.
The page sources is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test Headings in CSS Columns</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<style type="text/css">
#container {
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
}
</style>
</head>
<body>
<div id="container">
<h2>Lorem</h2>
<p>
ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Nam liber tempor cum soluta
nobis eleifend option congue nihil imperdiet doming id quod
mazim placerat facer possim assum. Typi non habent claritatem
insitam; est usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod
ii legunt saepius. Claritas est etiam processus dynamicus, qui
sequitur mutationem consuetudium lectorum. Mirum est notare
quam littera gothica, quam nunc putamus parum claram,
anteposuerit litterarum formas humanitatis per seacula quarta
decima et quinta decima. Eodem modo typi, qui nunc nobis
videntur parum clari, fiant sollemnes in futurum.
</p>
<h2>Sed ut</h2>
<p>
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, explicabo. Nemo enim ipsam voluptatem, quia
voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos, qui ratione voluptatem sequi nesciunt,
neque porro quisquam est, qui dolorem ipsum, quia dolor sit
amet, consectetur, adipisci[ng] velit, sed quia non numquam [do]
eius modi tempora inci[di]dunt, ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
ex ea commodi consequatur? Quis autem vel eum iure reprehenderit,
qui in ea voluptate velit esse, quam nihil molestiae consequatur,
vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
At vero eos et accusamus et iusto odio dignissimos ducimus,
qui blanditiis praesentium voluptatum deleniti atque corrupti,
quos dolores et quas molestias excepturi sint, obcaecati cupiditate
non provident, similique sunt in culpa, qui officia deserunt
mollitia animi, id est laborum et dolorum fuga. Et harum quidem
</p>
</div>
</body>
</html>
The misalignment of the tops of the columns remains if you remove the h2 elements and merge the paragraphs.
Is there a good reason for this misalignment or is it a bug/glitch in CSS implementation?
964
apply this css
h2
{
margin:0;
}
so basically you need to reset your h2 tag
working codepen
50
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
