CODEWITHSUNDEEP
htmlcsssafari
membersound
membersound

Reputation: 86777

CSS columns property ignored in Safari?

I'm using the following CSS property.

  -webkit-columns: 2 125px;
     -moz-columns: 2 125px;
          columns: 2 125px;

It works fine in most browsers, but I explicit have to support Safari-5.0.x. In this browser, the content is shown in two columns as expected, but the width of 125px is taken as absolute size! Thus, the two columns each are just 125px wide, instead of using 50% of the page.

How could I fix this?

What I noticed: removing the fixed number of columns fixed the issue, but I explicit want to restrict the count of columns to two bejond the 125px size.

Update: Interestingly, if I only change the following line, it works:

  -webkit-columns: 3 125px;

Result: 2(!) columns are shown in safari, and they are aligned as expected (content expands to container size). Does anybody know why?

Upvotes: 1

Views: 88

Answers (1)

Jacob Punton
Jacob Punton

Reputation: 11

I'd suggest using Bootstrap grid system, it's the most efficient. Especially that MOZ Columns may only work with supported browsers, Bootstrap is recommended for all versions of browser.

Upvotes: 1

Related Questions