CSS Form Float Issue

[ad5qa]

I have a form that I need help on. This is the reference image


I am using this technique: http://www.alistapart.com/articles/p...cessibleforms/

It all looks good except I am using float:right on the fields located to the right in green. The list items are in the magenta borders (all form elements).

My issue is to get the fields on the right I have to put them before the left ones.

Last Name {float:right}
First Name

Address 2 {float:right}
Address 1

This displays just as I want it to. However, if you disable CSS or use assisted technology it reads Address2, Address 1. IS there a way to correct this?

Thanks,

Tom

[simonpeterong]

since you are using float and you have a 2 columned form, why not make the left list float: left and still let the other float: right?

the trick is to have different widths on both columns. why?

lets say you have a 770px width for a page, and you made two columns, the first thing that comes to mind is to cut them equally, sometimes it will register a perfect 2 column webpage on bigger screens, but if you go to a smaller screen, the right column is squeezed and the result is that it will align itself on the bottom part of the first column, so give a space in between floats, so that it will register perfectly on a small or large screen, that is if you are thinking of using 2 floats for that form you're working on

[ad5qa]

Thanks,

That gave me an idea and your response hit the mark. Good poing on making it flexible.

Thanks and God Bless!

† taj