I'm actually not a web designer (programmer, instead), so I'm sorry if this question is a bit rudimentary.
I needed to put a very simple form in order, so I found some nice simple code here: CSS Drive Tableless Forms
This worked for my basic needs, no problem. But now I want to customize it a bit:
I have two dropdown boxes with two accompanying buttons to let you transfer items from one to the other. With the above CSS in play, it looks like this. What I want it to look like is this. This is something that is extremely easy to do in desktop applications...but is sure throwing me a loop to do it with CSS. I know I'm not supposed to use tables, though. Our designer would probably be mad at me if I did that again.
EDIT: I was able to obtain most of what I wanted by adding 'float: left' to each select element as well as the two buttons. Don't have them quite centered, but it's close enough for now. Link here. If someone knows how to vertically center the buttons, that would be fantastic information (the select boxes change in size, so I don't have a specific height to work with).
First, let me applaud your diligence in trying to avoid necessary tables. Indeed, your web designer will thank you.
To answer your question, though, we'd need to see the HTML/CSS.
I'd also consider not using this particular design pattern. It's traditional in windows desktop applications, but you might want to explore a more web-centric solution.
This particular method is click-heavy. Scroll the left list. Click an item. Click the button. Go back to the list. Scroll it. Click it. Click the button. Repeat.