Следующее работает без использования js / jQuery, но в этом примере полагается на использование псевдоэлемента css3 :nth-of-type(odd), хотя это можно заменить, применив класс css к нечетные наборы полей.
Он также основан на использовании height: 100% для fieldset s, что само по себе зависит от родительского элемента (в данном случае form), имеющего указанную высоту. Если это проблема, то для демонстрации я использовал overflow-y: auto; для наборов полей, чтобы ограничить их размеры до размеров их родительского элемента, но с поведением прокрутки, чтобы выявить переполнение.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://davidrhysthomas.co.uk/mindez/css/stylesheet.css" />
<style type="text/css" media="all">
form {
width: 50%;
height: 200px;
}
fieldset {
width: 30%;
height: 100%;
margin: 0 1em 0 0;
padding: 0.5em 1em;
overflow-y: auto;
}
fieldset:nth-of-type(odd)
{
float: left;
}
label {
display: inline-block;
width: 30%;
}
input[type=text]
{
display: inline-block;
width: 50%;
}
</style>
</head>
<body>
<div id="wrap">
<form enctype="form/multipart" method="post" action="">
<fieldset>
<label for="one">Label 1</label><input id="one" name="one" type="text" />
<label for="two">Label 2</label><input id="two" name="two" type="text" />
</fieldset>
<fieldset>
<label for="three">Label 3</label><input id="three" name="three" type="text" />
<label for="four">Label 4</label><input id="four" name="four" type="text" />
<label for="five">Label 5</label><input id="five" name="five" type="text" />
<label for="six">Label 6</label><input id="six" name="six" type="text" />
</fieldset>
</form>
</div>
</body>
</html>
Демонстрация онлайн по адресу: http://www.davidrhysthomas.co.uk/so/fieldsets.html.
Очевидно, что если есть какие-либо вопросы или проблемы, не стесняйтесь ставить их в комментариях, и я сделаю все возможное, чтобы помочь вам. =)