How do I get css columns to play properly with margins? [closed]

Question

http://arcanatheatre.com/

In safari, the second column appears higher. Both columns begin with an h4, but it appears that the top padding on the div itself is only applying to the first one.. or something. Not really sure what's going on. It lines up in Chrome

Answer 1

It's my understanding that the current [19/09/2012] implementation of CSS3 columns sometimes takes margin/padding from the bottom of one column and carries some of it on to the next. I don't know exactly how this is determined, but I was having trouble with a layout I was working where, as I changed the amount of content, sometimes the tops of my columns would line up, and sometimes they wouldn't. It was kind of haphazard.

The solution I came up with was this:

For the sections (in your case that'd be "featuring", "directed by", "performances", etc) apply these rules:

-moz-column-break-inside:avoid;
-webkit-column-break-inside:avoid;
column-break-inside:avoid;

Then, instead of using margin to separate the sections, use padding. Padding is considered part of the section we are telling it not to break inside, whereas margin is not.

Answer 2

you can easily see you have padding

and your .info is running it

remove the .info top padding and you will be fine.

this is all happen because your h4 already have the same padding.