CSS, чтобы заменить макет таблицы для форм

Question

Я смотрел на другие вопросы и не могу найти решение этой проблемы. Посмотрите на это изображение: макет http://img201.imageshack.us/img201/935/image2h.png

Я хочу обернуть div и сложить их вертикально. ЗЕЛЕНЫЙ div будет оберткой на линии. СИНИЙ div будет содержать html-метку и, возможно, значок для всплывающей подсказки. ОРАНЖЕВЫЙ div должен содержать какую-то запись (input, select, textarea).

Некоторые из них будут сложены вертикально, чтобы составить форму. Я делаю это сейчас, но я должен указать высоту для контейнера div, и это действительно нужно изменить в зависимости от содержимого - учитывая, что любая запись может попасть туда. Здесь также могут приземлиться изображения и другие вещи.

У меня есть ширина, установленная на СИНИЙ div, и ОРАНЖЕВЫЙ - float: left. Как я могу избавиться от высоты на div и позволить этому быть определенным содержанием? Есть ли способ лучше? Изменить все на что-то другое будет сложно, и предпочтительнее будет стиль всех элементов или что-то в этом роде.

Код, который я использую, выглядит так:

<div class=EntLine>
    <div class=EntLbl>
      <label for="Name">Name</label>
    </div>
    <div class=EntFld>
      <input type=text id="Name" />
    </div>
</div>

CSS выглядит так:

.EntLine {
  height: 20px;
  position: relative;
  margin-top: 2px;
  text-align: left;
  white-space: nowrap;
}

.EntLbl {
  float: left;
  width: 120px;
  padding: 3px 0px 0px 3px;
  min-width: 120px;
  max-width: 120px;
  vertical-align: text-top;
}

.EntFld {
  float: left;
  height: 20px;
  padding: 0px;
  width: 200px;
}

Answer 1

Ну, для начала я думаю, что вы могли бы использовать меньше наценки для достижения своей цели. У вас может быть веская причина для обтекания div вокруг каждого элемента вашей формы, но если вы просто принудительно вставляете одну пару метки-ввода в каждую строку, вы можете вкладывать input в тег label:

      <label for="Name">Name
          <input type="text" id="Name" />
      </label>

Таким образом, вы можете использовать простое:

label {display: block; }

, чтобы заставить каждую пару к своей линии. Это также устранит необходимость float label s, что устраняет необходимость указывать height любого содержащего элемента.

Вы все еще можете применять несколько классов к соответствующим полям / меткам, но это гораздо меньше проблем. Если я действительно что-то упустил.

Если все это не удастся, вы можете просто добавить пустой div (или другой элемент) после последнего из ваших полей и стиля с помощью:

#empty_element {
disply: block;
height: 0;
clear: both; /* to force the parent element to expand to contain this element and, by extension, any non 'position:absolute' siblings that precede it in the mark-up */
visibility: hidden;
}