Custom/Dynamic One Page Checkout layout

[dappy2]

So I am working on customizing the design of my AbleCommerce install. I'm pretty far along and I've got the hang of most everything. I'm mostly just doing design changes. Here's what I want to do/try on the checkout. I like how everything works but I think the page is too long. The space could be used much better. I'm fine with step one (billing address, shipping address).

However, once that information is entered I don't want them to take up the whole width of the opcMainPanel section. This is how I am thinking of doing it:

1. Strip all the table html and replace them with div's (you can have a div runat="server" and it functions the same usually).
2. Dynamically change the CssClass (or add another one) when after the ajax event of entering the billing address.

And that is the problem - I have no idea how I would go about doing that in the codebehind? (Extreme novice with programming and most of my knowledge is creating contact forms in VB.Net)

I'm completely fine with the CSS etc and I don't mind messing with the code behind if someone could point me in a direction?
(I already have the .ascx & .cs files for the Checkout in ConLib/Custom)

See attached files for what I am looking for.

[Redcell]

That would be an awesome checkout. A true One Page Checkout.

[dappy2]

Sorry to respond to my own post. Upon some further investigation I think I just want to create a 2 column layout for that which should be easy enough. Where I am confused is when certain items are visible and not visible.

Billing Address = always visible
Shipping Address = always
Shipping Method (showRates) - after ajax event 1
trAlreadyRegistered = ? I've never seen this come up in testing
trAccount = visible if not logged in/ no account?
trEmailLIsts = ? never saw in testing
trPayment = after ajax event 1
trCoupon = I added this cause I don't think it should sit in the sidebar - should be with payment info

If someone could clarify when some of the ?'s show up I think it would help me greatly. IE are the trAlreadyRegistered and trAccount ever visible at the same time? When does trEmailLists show up? It should be easy to do within the existing table structure or with div's depending on when / how certain elements are enabled/visible.

Thanks,
Dappy

[mazhar]

trAlreadyRegistered
trAlreadyRegistered is made visible if user is trying to checkout anonymously but he has a registered account with the Email he specified in address.

trAccount
trAccount is made visible when some user is done with the address screen and wants to checkout anonymously without creating an account.

trEmailLIsts
From merchant side first go to marketting and create some Email lists. Then trEmailList will be made visible after the address information screen.

In order to check first to cases enable anonymous checkout on the OnePageCheckout like
[[ConLib:OnePageCheckout AllowAnonymousCheckout="true"]]