CSS3 Columns and UIWebView

Question

Using CSS3 columns to take a somewhat large text document and make it scroll horizontally. I want each column to be close to the size of the iPad screen, as I am displaying the content in a UIWebView.

If I make the -webkit-column-width: property a relatively small number, everything works great. The text stops at the max-height set for the containing and columns out horizontally.

If I make -webkit-column-width anything larger than about 300px, though, this css seems to get completely ignored. The text displays vertically as it would without styling. Any fixes?

Display when -webkit-column-width is 325px. The view scrolls to the right normally:

325

Display when -webkit-column-width is 500px. Text appears as one column and the view scrolls downward to the end of the document, ignoring max-height: 500

Can you post a screen-shot - not entirely clear what's happening from your question — Michael Mullany

wojtiku wojtiku · Accepted Answer · 2010-11-19T21:26:23

You are trying to divide, let's say, 600px wide container into X 500px wide columns. Browser renders only one column because it can't put 2 (or more) 500px wide columns in 600px wide container. First of all - by default, the browser will stretch your content vertically, to make it stretch it horizontally you have to specify fixed height for the container and width needs to be set to auto (which is default). Of course you need to adjust this values so columns will fit iPads viewport.

Here is demo of code, that should work properly - http://jsfiddle.net/wojtiku/bFKpa/

#container {
    height: 300px;
    -webkit-column-width: 150px;
    -webkit-column-gap: 20px;
}

NOTE: I don't have iPad, tested on desktop.

CSS3 Columns and UIWebView

1 Answers