Table Columns Not Lining Up Correctly Options

[AlexisLauren]

I have a table in which two columns are supposed to line up horizontally, but I can't seem to get them to. The right column is a line lower than the left. The two green lines beginning "Custom Perfume" should align, as should the pictures above them. Any guesses about what my problem might be?

The best I've done so far is forcing everything in that particular table down a few <br>'s which somehow fixes the problem, but leaves a gap that's too large.

here's a link, notice the part to remove-

http://gator1082.hostgator.com/~afte{REMOV...ome.php?cat=253

(A side note: this is my company's website and we've recently taken over finishing developing and debugging it before launching due to a falling out with the developer. I am very much a newbie to all of this.)

Thanks!

This post has been edited by AlexisLauren: Jun 1 2010, 06:35 PM

[Darin McGrew]

You don't have "a table".

You have multiple tables. The table for the Aftelier Studio column is separate from the table for the Long Distance column, and those two tables are inside another table.

When debugging table layouts, it helps to turn on table borders so you can see what is going on. When you get the layout right, then turn off the borders again.

[pandy]

The two nested tables don't have equal height and the default value for 'valign' is 'middle'. Two items that's are both vertically centered and of different height won't line up at the top.
http://htmlhelp.com/reference/html40/tables/td.html

[AlexisLauren]

Thanks! Both these tips were really helpful - I turned the borders on, was able to see the valign center issue, and fixed it with some extra <br>'s. It probably wasn't the most elegant way of doing it, but it looks aligned now!

[pandy]

It looks somewhat aligned, depending on the text sized used. You missed the obvious solution - use valign="top" .