11

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

Damon
  • 10,493
  • 16
  • 86
  • 144
  • 1
    I've had an identical situation, but across all browsers. In my case, objects' top margin seemed to be ignored in columns latter than the first one. I've solved it with: `div.wrap_columns>* { margin-top: 0px }`. Actually, I planned to use `first-child` selector, but it happened to work without it and without disturbing top margin on other-than-first containers. – Michał Sacharewicz Jul 11 '14 at 14:31

2 Answers2

14

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.

David Quinn Carder
  • 161
  • 1
  • 6
1

you can easily see you have padding

enter image description here

and your .info is running it

enter image description here

enter image description here

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

enter image description here

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

Duncan Babbage
  • 19,972
  • 4
  • 56
  • 93
balexandre
  • 73,608
  • 45
  • 233
  • 342
  • still don't quite see how that happens.. both columns have the same top margin (from the h4) and the same overall padding from their container. I know about collapsing margins, but the second column ignores the padding then? is that just a quirk of safari's css3 implementation? (i changed it to margin for now) – Damon Jul 07 '11 at 13:48
  • play around with the inspector so you can know a little bit more of CSS. – balexandre Jul 07 '11 at 15:39
  • it only looks like it did initially in safari; firefox and chrome looked normal (and the display made sense given that padding ought to apply to the whole element not just the first column) – Damon Jul 07 '11 at 16:57