Formatting product options on product page?

Hello everyone, I'm new here and I think this is great free software, and the amount of support and add-ons available here is great. I chose Zen Cart to create a new site for my company as our old one, which was outsourced, is dated, riddled with issues and has awful cross-browser support. Though I'm generally good with computers, my only web experience was some basic HTML from years ago. So far, I've had success modifying an install of Avonlee Contempo to suit my needs, until now...

This site is for gift baskets and floral arrangements, so the possibility exists of a client wanting to send items to more than one distinct recipient. To allow Zen Cart to accommodate this, I did away with the traditional delivery info part of checkout, and opted to have it right on the product page in the form of text input options. That way each gift has its own delivery info when added to the cart, and you can pay for them all at once.

However, the options lack formatting whatsoever and are just all over the place. I'd like them to line up nicely, and to do away with the line break between options. The site is on a temp server for building and testing purposes until it's ready -you may see what I mean here.

Another thing I'd like to accomplish is to move the "add to cart" button from before the attributes to after them. I assume I have to modify some CSS, which I'm prepared to do, but my experience with it is weak and I thought I could save myself a lot of headaches by asking for some pointers. Any help is GREATLY appreciated...

Re: lining the attributes up. Edit /includes/templates/avonlee_contempo/css/stylesheet.css to add:

#productAttributes h4.optionName {
width: 13em;
}
h4.optionName+div.back+br {
display: none;
}

Oh man, that was fast. Thank you, that worked perfectly, and probably just saved me days of hassle.

Now for my remaining problem, is there a way to make "add to cart" appear AFTER all those attributes? As I hope for a response, I will continue trying to get this delivery date calendar thing working...

Is there a reason that you've got an empty, 150px right sidebox? If you disable that sidebox, there's room for your addCart and productAttributes div's to exist to the right of the product's main image ...

I assume an aspect of the template that I failed to see to. The template came with a great deal of "clutter" with filler content, which I cleaned up mostly with the sidebox controller. If the presence of sideboxes is more deeply defined in coding, it's still there.

To disable the right sidebox, go to your admin's Configuration->Layout Settings. Set
Column Right Status - Global to 0 (off)
Column Width Right to 0

That will remove the 150px that's allocated for that space.

Very good advice...