ansaurus

Question

Webform Layout Question. Table or something else

Answer 1

+1 A:

Did your formatting for the example not take? If you just want a label, input control, and a space, just add the controls to the page with no formatting whatsoever. HTML will lay out that way.

However, I assume you want some kind of columns. You have several possibilities. The most inflexible is absolutely positioning the controls (markup).

You could use tables, which would be the most straight-forward. However, purists would argue that tables are for data, not layout.

You could also left float a series of DIVs to represent columns: one column for a label, one for an input, a third for labels, a fourth for input, etc.

EDIT: If you aren't worried about labels lining up vertically with labels and inputs lining up vertically with inputs, just put one label + input pair in each column, whichever method above you choose.

HardCode 2009-02-21 02:23:56

Do you happen to have an example of the left float divs?I've tried messing with floats and some stuff works in firefox, and chrome while others don't.Thanks though!

zSysop 2009-02-21 02:37:22

<div style="float:left;width:100px;">Column1</div><div style="float:left;width:100px;">Column2</div> ... etc.

HardCode 2009-02-21 04:01:40

Answer 2

+3 A:

Just do it with tables. Tables are fine for tabular data, like stuff with columns and rows... like in your case!

antti.huima 2009-02-21 02:30:20

here here. In the wild world of HTML and CSS, do whatever looks right in the end, it all turns into a hack in the end ;)

TJB 2009-02-25 04:58:53

Answer 3

+1 A:

How about something like this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
  <style type="text/css">
    .column {
      width: 200px;
      float: left;
    }

    .column label {
      clear: both;
      float: left;
      margin-right: 10px;
      margin-bottom: 5px;
      text-align: right;
      width: 75px;
    }

    .column input {
      float: left;
      width: 100px;
    }
  </style>
</head>

<body>
  <div class="column">
    <label>Label 1:</label> <input type="text" />
    <label>Label 2:</label> <input type="text" />
    <label>Label 3:</label> <input type="text" />
    <label>Label 4:</label> <input type="text" />
  </div>

  <div class="column">
    <label>Label 5:</label> <input type="text" />
    <label>Label 6:</label> <input type="text" />
    <label>Label 7:</label> <input type="text" />
    <label>Label 8:</label> <input type="text" />
  </div>
</body>
</html>

If you like that, you might consider using fieldsets instead of divs for the columns. They style nicely and are more semantic. Either way works well though.

Dave Ward 2009-02-25 05:38:28

Thank you very much! This is exactly what i am looking for.

zSysop 2009-02-26 00:03:29

Does this method work with anything but the simplest of forms?

Asher 2010-09-09 06:09:36

You need more styling rules for larger forms, but this approach does work, yes. In particular, fieldset elements are great for breaking large forms down into smaller, approachable problems. It *seems* easier to fit fieldset blocks together than it does dozens of form elements.

Dave Ward 2010-09-09 11:54:03

ansaurus

tags:

views:

answers:

Webform Layout Question. Table or something else

related questions