Display left <TD> to the right of right <TD>

I've got a table with two tablecells:

<table>
<tr>
<td>[Left]</td>
<td>[Right]</td>
</tr>
</table>

This is a simplification of a control I'm using (System.Web.Ui.Webcontrols.Wizard).

What I'm trying to accomplish is to display the left column on the right like this:

[Right] [Left]

I've tried JQuery and it works like it should BUT you can see the screen flicker when its moving the content. This because of the page which renders then executes the JQuery.

I've also tried influencing the rendering of the control only then I lose the Event开发者_C百科Handlers for the Menu or the Content (depending on which cell I move)

My question:

Is it possible to use CSS to accomplish the result I need?

OR

How can I manipulate the Wizard control to get the menu on the right side.

I suggest you to use a ASP.Net control adapter. This article may help you to understand how it works : ASP.NET 2.0 Control Adapter Architecture.

The key idea is to override the standard rendering of the wizard control to a custom render method of your own. Then you will be able to virtually produce any output. It can be a bit tricky in some case though.

[edit] According your comment, you will be able (if you are lucky) to rely on the ASP.Net CSS control adapter shipped by Microsoft. The original target of these adapters is to generate a clean W3C compliant html (using div) instead of the standard rendering (based on tables). If the wizard control produces a table, you can maybe use a combination between the css adapters and a custom CSS file that can play with "float:left" and "float: right" styles to swap columns. I didn't try, but it merits to be looked at.

Simple as that:

<table dir="rtl">

By having it Right-to-left you make the cells appear in reverse order, achieving your desired effect. Example.

var tempContentOfRightCell = $("#right").html();
$("#right").html($("#left").html);
$("#left").html(tempContentOfRightCell);

should work. Remember to give id's of right and left to your cells.