• Locked
2 replies [Last post]
Thu, 2016-10-20 22:38
nicecap
nicecap's picture
Offline
newbie
San Francisco
Last seen: 3 years 38 weeks ago
San Francisco
Timezone: GMT-7
Joined: 2016-10-20
Posts: 2
Points: 3

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

Top
Tags:
Thu, 2016-10-20 23:14
#1
nicecap
nicecap's picture
Offline
newbie
San Francisco
Last seen: 3 years 38 weeks ago
San Francisco
Timezone: GMT-7
Joined: 2016-10-20
Posts: 2
Points: 3

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

Top
Fri, 2016-10-21 17:14
#2
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 59 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
  • Locked