В общем немного замаялся... Всяко разно пытался, всё кривовато получается.
Как соорудить такой "контрол", который будет много раз появляться на странице в самых разных местах?

|-------------|
| комментарий |
|-------------|
|   длинное   |
|   описание  |
|-------------|
|  F1  |[Поле]|
|-------------|

Где "комментарий", "длинное описание" — некий текст (могут разбиваться на несколько строк), горизонтально выровнены по центру контрола; "F1" — некая метка поля, должна быть в центре ячейки; "[Поле]" — обычный <input type="какой угодно" size="всякий разный">.

Вот наваял примерно так:

<table style="width:1px" cellpadding="0" cellspacing="0">
               <tr><td colspan="2" style="font-size:smaller;text-align:center;">Bla-bla-bla! Hurrrraaa! Foo bar baz. Blah. Huh?<br/>Suxx!</td></tr>
               <tr style="background-color:black;color:white;text-align:center;"><td colspan="2" style="font-size:smaller;">(A + B + C + D + E) <em>minus</em> (F + G + H + I)</td></tr>
               <tr style="background-color:black;color:white;">
                       <td style="width:3em;text-align:center;vertical-align:middle;">F1</td>
                       <td style="padding:1px;"><input style="padding:1px;border:none"/></td>
               </tr>
       </table>

Но выглядит как-то криво — бордюр вокруг input разной ширины и не работает width:3em для ячейки с меткой. И элемент блочный, хочется инлайновый.

Помогите, пожалуйста, до ума довести! А ещё лучше переписать на div-ы, и все стили в файл закинуть — т.к. таких контролов на странице будет много и хочется сократить объём.

Как вообще заставлять элементы занимать не всё доступное место, а только необходимое для определённого контента (в данном случае метка+input)?

Если имеет значение, то можно только для Firefox (XUL? ).

Для того чтобы элемент занимал только необходимое место, его можно сделать float: left или right. Недостатки: он тогда будет прибит к краю блока, несколько таких элементов один за другим создают подобие лесенки, избавиться от которой можно, объявив каждый такой элемент clear: both (или clear: left или right, соответственно), но очистка происходит всех обтеканий, то есть, если у Вас левое меню сделано на флоате, следующий элемент провалится сразу под меню.
Если допустимо делать только под Файрфокс, можно попробовать поиграть с display:-moz-box или -moz-inline-box, -moz-box-orient: vertical, и -moz-box-pack: start, center или end.
У Оперы на этом месте есть что-то вроде display: inline-block

Ладно, понятно. Единственное, что с чем получилось более менее нормально, так это <table width="1">. Без таблицы никак не смог нашаманить.

подожди, а разве нельзя было собрать скриптом в какую либо переменную нужную конструкцию с заданием положения на странице, а потом иннером вставлять в плавающий div?  нужные размеры, оформление и положение тоже указать скриптом - setAttribute и все дела..
или я не так понял?