Форма в две колонки

[evgenbkn]

Есть необходимость переверстать форму из двух колонок с таблиц на дивы.

Проблема в том что часть полей из левой колонки надо растянуть на две, т.е. типа colspan

Пришлось делать так в два блока до поля на всю ширину потом один блок на всю ширину,

потом опять в два блока. Как-то не очень красиво. Может кто сталкивался с таким. подскажет как это сделать красиво.

Спасибо.

[Vlad]

Используй float.

Стиль

#form_comment .row {
  margin-bottom: 5px;
}

#form_comment .label {
  width: 100px;
  float: left;
  margin-right: 10px;
  text-align: right;
}

#form_comment .field input, #form_comment .field textarea {
  width: 75%; 
}


HTML-код

  <form method="post" action="">
   <div class="row"><span class="label">Имя</span><span class="field"><input type="text" name="user" maxlength="20"></span></div>
   <div class="row"><span class="label">Комментарий</span><span class="field"><textarea name="text"></textarea></span></div>
   <p><input type="button" value="Добавить комментарий"></p>
  </form>

[evgenbkn]

Спасибо, но не то что мне нужно. Жалко картинку не прикрепить.

label:input label:input

label:input label:input

label: ###very long input

label: radio1 lablel1 radio2 label2 radio3 label3

label:input label:input

label:###textarea#####

Спанов очень много получается, проще мне кажется тогда таблицами оставить. Спасибо.

Я делаю так, не думаю что это гуд

.left {
	float: left;
	width: 350px;
}

.right {
	width: 350px;
	float: left;
}

.container label {
	display: inline-block;
	width: 170px;
	text-align: right;
	font-size: 9pt;
	font-family: Arial, Verdana, Helvetica, Geneva, Sans-serif;
	padding-right:5px;
	float:left;
	margin-top: 2px;
}

.container input {
	width: 160px;
	font-size: 9pt;
	font-family: Arial, Verdana, Helvetica, Geneva, Sans-serif;
	display:inline-block;
	float:left;
	margin-bottom:5px;
}

.container select {
	width: 160px;
	font-size: 9pt;
	font-family: Arial, Verdana, Helvetica, Geneva, Sans-serif;
	display:block;
	float:left;
	margin-bottom:5px;
}

.container br {
	clear: left;
}

.footer {
	clear: both;
}

.big {
	clear: both;
}

.big  {
	width: 510px !important;
}
<form id="" method="post" class="container">
   <!-- Left column -->
   <div class="left">
	   <label for="input1">label:</label>
	   <input name="input1" maxlength="10"/><br/>
	   <label for="input3">label:</label>
	   <select name="input3">
		   <option value="">...</form:option>
		   <option value="">...</form:option>
		   <option value="">...</form:option>
	   </form:select><br/>
   </div>
   <!-- Right column -->
   <div class="right">
	   <label for="input2">label:</label>
	   <input path="input2"/><br/>
	   <label for="input4">label:</label>
	   <input name="input4" maxlength="6"/><br/>
   </div>
   <div class="big">
	   <label for="input5">label5:</label>
	   <form:input name="input5" maxlength="1024"/><br/>
   </div>
   <div class="left">
		  .....
   </div>
   <div class="footer">
   </div>
</form>

[klierik]

2evgenbkn

помещайте код в соответствующие теги

в данном виде читать ваш код никто не будет

[ZooY]

Ну вот как то так:

<style>
label { display: block; float: left; width: 170px; text-align: right; }
input, select { width: 510px; }
.col1 input, .col1 select, .col2 input, .col2 select { width: 160px; }
.col1 { width: 350px; float: left; }
.row { clear: left; }
</style>


<div class="row">
	<div class="col1">
	<label for="input1">label:</label><input id="input1">

	<label for="input2">label:</label><input id="input2">

	</div>
	<div class="col2">
	<label for="input3">label:</label><select id="input3"><option value="">...</option><option value="">...</option><option value="">...</option></select>

	<label for="input4">label:</label><input id="input4">

	</div>
</div>
<div class="row">
<label for="input5">label5:</label><input id="input5">

</div>
<div class="row">
	<div class="col1">
	<label for="input6">label:</label><input id="input6">

	</div>
	<div class="col2">
	<label for="input7">label:</label><input id="input7">

	</div>
</div>

[evgenbkn]

Спасибо. Только не пойму чем div в данном случае лучше таблицы. ?. Просвятите не посвященного, плиз. (Я в верстке дивами совсем новичек)

[Dimitry Wolotko]

Ничем не лучше. В таких ситуациях, имхо, можно без зазрения совести юзать таблицы.

[Vlad]

Точно, таблицей даже лучше будет - быстрее и универсальнее.

[evgenbkn]

Спасибо, еще раз Работает

[ZooY]

Верстка дивами хороша, когда дихайн формы может меняться. Например сейчас она сделана в две колонки, а завтра ты решишь сделать ее в одну. Если у тебя сверстано все таблицами, то нудно будет лезть в код страницы. Не дай бог форма у тебя такая не одна... А когда используются div-ы достаточно поправить один CSS-файл. Только для большей универсальности код должен выглядеть примерно так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

<style>
label { display: block; float: left; width: 170px; text-align: right; }
#form { //height: 1px; }
#input1field, #input2field, #input3field, #input4field, #input6field, #input7field { width: 350px; } /* все строки кроме длинных */
#input1field input, #input2field input, #input3field select, #input4field input, #input6field input, #input7field input { width: 160px; } /* все элементы формы кроме длинных */
#input1field, #input3field, #input6field { float: left; margin-right: -350px; } /* все строки первого столбца */
#input2field, #input4field, #input7field { margin-left: 350px; } /* все строки второго столбца */
#input5field input { width: 510px; } /* блинные элементы формы */
</style>

</head>
<body>

<div id="form">
<div id="input1field"><label for="input1">label:</label><input id="input1"></div>
<div id="input2field"><label for="input2">label:</label><input id="input2"></div>
<div id="input3field"><label for="input3">label:</label><select id="input3"><option value="">...</option><option value="">...</option><option value="">...</option></select></div>
<div id="input4field"><label for="input4">label:</label><input id="input4"></div>
<div id="input5field"><label for="input5">label:</label><input id="input5"></div>
<div id="input6field"><label for="input6">label:</label><input id="input6"></div>
<div id="input7field"><label for="input7">label:</label><input id="input7"></div>
</div>

</body>
</html>