How can I align elements that are in different <div>'s?
Joined: Oct 24, 2008
I wonder if anyone can help me with a couple of alignment issues?
I have several divs in my page that are all actually jQuery accordions. They are each separate accordions because I want to be able to open more than one of them at any one time. Each accordion is a little calculator of some sort with a total down at the bottom. When I close a particular accordion, I have the total for that section appear next to the header title for that accordion. So the code for a particular accordion header contains something like:
What I would like is for all of the accordion_header_total's for each section to be in vertical alignment with each other. They aren't at the moment because obviously the accordion titles are of different lengths. Does anybody have any idea how I could acheive this?
Also it would be great if the input boxes for each accordion section lined up with one another from section to section. Right now I am using a two column table to align the input boxes in a particular accordion, but if there are two accordions open, then the input boxes for one won't line up with the input boxes for the next accordion.
Furthermore, the user can make certain choices in a section they may result in some more content in the form of extra input boxes being added. This is obviously incredibly exiting stuff from a user perspective, but the experience could be slightly marred by the fact that the input boxes jump to the right because the left hand column has text that is longer than the table had previously, so the input boxes which are in the right hand column have to move right. I would be really greatful if someone could help me understand how I might be able to fix this.
Joined: Oct 24, 2008
Just in case anybody want to know, I eventually found a solution to how to line up input boxes that are in different divs. I found this solution at www.css-tricks.com. So basically, instead of aligning stuff in each separate div within a table, I put all my labels in <label> tags for the left hand column. The labels are floated to the left and given a certain width, this way all of the input boxes are nicely lined up and each div will have the same width for the label, so the input boxes can be in alignment from one div to the next.