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