ansaurus

Question

Answer 1

+1 A:

View a great tutorial here, and the resulting layout here

Edit: Hope you meant a two-column layout with fieldsets in it rather than a layout with two columns of fieldsets. If you it's the latter, these links won't help you.

Hooray Im Helping 2009-05-30 16:15:37

The latter, but your links provide a good read anyway, thanks.

ProfK 2009-05-30 17:07:31

Answer 2

+2 A:

So after seeing your comment about you looking for a layout with two columns of fieldsets, I went and wrote up this one without the use of tables:

<html>
<head>
<title>Two Column Fieldsets</title>

<style>
html, body
{
  background: #156;
  text-align: center;
}

#container
{
  background: #FFF;
  border: 1px #222 solid;
  height: 600px;
  margin: 0 auto;
  text-align: left;
  width: 700px;
}

#container form
{
  margin: 0 auto;
}

label
{
  float: left;
  width: 50px;
}

.singleRow
{
  float: left;
  width: 322px;
}

</style>

</head>
<body>
<div id="container">
  <form action="">
    <fieldset class="singleRow">
      <label for="1">Text:</label>
      <input id="1" type="text" />
      <input type="submit" value="submit" />
    </fieldset>
    <fieldset class="singleRow">
      <label for="2">Text:</label>
      <input id="2" type="text" />
      <input type="submit" value="submit" />
    </fieldset>  
  </form>
</div>
</body>
</html>

Most of the styles are just to make it line up nice and centered and to provide some contrast. The way to get two columns is to float both fieldsets left. Each fieldset has a class called .singleRow, whose only important style is float: left; (the width is in there to make them line up nicely). By floating both of the elements (in this case fieldsets, but they could be divs lis, any element) left, and making sure their combined widths are less than the width of their container, you can achieve a nice two-column layout.

Hope this helps.

Hooray Im Helping 2009-05-30 23:54:50

Thank you for a most erudite answer @Hooray! I'll test it out a bit later.

ProfK 2009-05-31 09:10:22

ansaurus

tags:

views:

answers:

Two column page with fieldsets

related questions