Thu, 2016-10-20 22:38
Hello guys,
I am creating a wordpress page. A demo is here: gtinaviholding.livedemo.click
For the content under menu item "About Us" I use a 3 column layout which I defined as CSS:
.threecolumns { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; -moz-column-gap: 30px; -webkit-column-gap: 30px; column-gap: 30px; text-align: justify; /* Optional */ }
Looks good in Firefox and Edge.
In Chrome and Safari there is a gap on top of column 3 which looks ugly.
Does anyone know how to avoid this gap in chrome and safari?
I would be fine with breaks inside of
tags as long as this gap could be avoided.
Thanks very much for any help.
Chris
Thu, 2016-10-20 23:14
#1
Guys, a few minutes after my
Guys,
a few minutes after my post I found a solution.
Seems to work in all browsers:
I just added a display statement to the paragraphs of my multicolumns class:
.threecolumns { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; -moz-column-gap: 30px; -webkit-column-gap: 30px; column-gap: 30px; text-align: justify; /* Optional */ } .threecolumns p { display: inline-block; }
Thanks
Chris
Fri, 2016-10-21 17:14
#2
I suspect...
I suspect that's just a bandage, not a fix of the real issue. Your link appears to be poorly formed, so I can't see the actual source.
Would you post the test case's html markup for us?
cheers,
gary