No replies
stevep98's picture
Last seen: 11 years 35 weeks ago
Timezone: GMT-7
Joined: 2011-03-25
Posts: 1
Points: 2

I am trying to lay out a simple form. i.e. a series of text boxes with associated labels. (Name, street, city, country, etc).

Each entry field needs to be on a separate row, and be preceded by a label, and possibly have a error field following (e.g. 'invalid state'). For neatness, the input boxes need to line up in such a way that the left edges are all at the same x-position. I am running into difficulty in making this happen.

Of course, the easiest way is to set the width on the label DIVs. But, this requires me to know how wide the text for the label is. I am not sure how to handle cases where the user has zoomed or is using a different font which causes the width to be exceeded. (Is specifying the width in em's sufficient?)

TABLEs have the useful property that a column can be auto sized to the largest cell in that column. However, when trying to do this with DIVs instead of TABLEs, you lose this semantic relationship that the labels all belong to the same 'column'. I have encountered several instances where I would like to link together properties of various unrelated elements in the DOM. I was hoping there would be something in CSS 3 for this, but I cant see anything. It might work something like this.

DIV#fred { width: @(DIV#jim) }