In HTML - how to build columns that withstand changing document direction?

I want to create three columns. If I use float: left, and the开发者_开发技巧n change the document from LTL to RTL, this means the order of columns from left to right stay the same.

I know about the column-count css property, but this doesn't work in IE9.

Tables are also an option. Is that considered bad markup?

Any ideas?

If you want the columns which would also be RTL, you can use inline-blocks instead of floats for column layout: http://jsfiddle.net/kizu/YmkbJ/

I used spans so I won't have to use hacks for IE, but if you'd like to use divs — use Conditional Comments with {display:inline;zoom:1;} to fix it so block-level tags would behave like inline-blocks.

CSS3 has the option, to display columns, but this is currently not implemented across all browsers. For example Wikipedia uses that already for the references-section.

Those columns work for both text directions.

ul.two_column {
    -moz-column-count: 2;
    -moz-column-gap: 2em;
    -webkit-column-count: 2;
    -webkit-column-gap: 2em;
    column-count: 2;
    column-gap: 2em; }

See also:

• http://www.quirksmode.org/css/multicolumn.html
• http://www.alistapart.com/articles/css3multicolumn