Arranging fieldset elements like a typical table-design

Question

I'm trying to arrange the titles for 3 fieldset elements the same way a typical table looks, but I can't get it the way I want. This comes pretty close, however...

<label style="vertical-align:top;">Title1</label>
<fieldset style="display:inline; border:none; padding:0px; margin:0px; vertical-align:middle;">
<input value="Lorem Ipsum" /><br />
<input value="Lorem Ipsum" /><br />
<input value="Lorem Ipsum" />
</fieldset>

<label style="vertical-align:top;">Title2</label>
<fieldset style="display:inline; border:none; padding:0px; margin:0px; vertical-align:middle;">
<input value="Lorem Ipsum" />
</fieldset>

<label style="vertical-align:top;">Title3</label>
<fieldset style="display:inline; border:none; padding:0px; margin:0px; vertical-align:middle;">
Lorem Ipsum
</fieldset>

I may've used tables if there was a way I didn't have to run an if statement in my PHP code for both the title and the fieldset element. Plus, using fieldset for what I'm doing here seems to be a better alternative, in terms of pretty code.

Got any suggestions for anything similar to the code above? Clarification: http://anony.ws/di-FJKD.jpg

What is it NOT doing that you want it to do? Do you have like an image or example of what you want the end result to be like? I'd like to help you out but I'm not sure what you're actually trying to do. — stogdilla, Jun 04 '11 at 03:18
As I said; it's cleaner, and I won't have to run an if statement for the same thing, twice. It's redundant. — Nisto, Jun 04 '11 at 06:14
Labels are for input controls. Use `legend` instead, and place them inside the fieldset. — NGLN, Jun 04 '11 at 10:59

score 2 · Answer 1 · edited Oct 09 '15 at 14:10

Like this

    .divTable {
      display: table;
      width: 50%;
    }
    .divRow {
      display: table-row;
    }
    .cellOne,
    .cellTwo {
      display: table-cell;
      padding: 20px;
      width: 30%;
    }

<fieldset id="fileConnSet">
  <legend>File:</legend>
  <div class="divTable">
    <!--Table start-->
    <div class="divRow">
      <!--1st row, like <tr>-->
      <div class="cellOne">
        <!--1st column, like <td>-->
        <label>Name:</label>
      </div>
      <div class="cellTwo">
        <!--2nd column-->
        <input type="text" />
      </div>
    </div>

    <div class="divRow">
      <!--2nd row, like <tr>-->
      <div class="cellOne">
        <label>Age:</label>
      </div>
      <div class="cellTwo">
        <input type="text" />
      </div>
    </div>

    <div class="divRow">
      <!--3rd row, like <tr>-->
      <div class="cellOne">
        <label>Company:</label>
      </div>
      <div class="cellTwo">
        <input type="text" />
      </div>
    </div>
  </div>
  <!--Table end-->
</fieldset>

Some explanation would be nice – Andrew Barber Oct 09 '12 at 07:57 — Andrew Barber, Oct 09 '12 at 07:57

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

what you could do is remove the label's from the flow so they don't get vertically aligned with the inputs/text.. do this by absolutely positioning them.. this will require a parent element to have position: relative; on it - I presume the overall code above is in a form element but for the sake a demo I've just wrapped all your code in a div.

Working Example

HTML:

<div id="form"> 

  <label>Title1</label>
  <fieldset>
    <input value="Lorem Ipsum" /><br />
    <input value="Lorem Ipsum" /><br />
    <input value="Lorem Ipsum" />
  </fieldset>

  <label>Title2</label>
  <fieldset>
    <input value="Lorem Ipsum" />
  </fieldset>

  <label>Title3</label>
  <fieldset>
  Lorem Ipsum
  </fieldset>

</div>

CSS:

#form {
  position: relative; /* labels need this on the their parent element */
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  padding-top: 30px; /* leave a space to position for the labels */
}

fieldset {display: inline-block; vertical-align: middle;}
fieldset {display: inline !ie7; /* IE6/7 need display inline after the inline-block rule */}

label {
   position: absolute; 
   top: 5px; 
   left: auto; 
   margin-left: 5px; 
   font-weight: bold;
}

added per comments

because there's not enough room in comments, here's the code I was thinking which doesn't position the label, to do this the label would need to go inside the vertically aligned fieldset

#form {
  position: relative; /* labels need this on the their parent element */
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset {display: inline-block; vertical-align: middle; background: #eee;}
fieldset {display: inline !ie7;}


label {
   display: block;
   font-weight: bold;
}

HTML:

<fieldset>
  <label>Title1</label>
  <input value="Lorem Ipsum" /><br />
  <input value="Lorem Ipsum" /><br />
  <input value="Lorem Ipsum" />
</fieldset>


<fieldset>
  <label>Title2</label>
  <input value="Lorem Ipsum" />
</fieldset>


<fieldset>
  <label>Title3</label>
  Lorem Ipsum
</fieldset>

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 04 '11 at 09:58

clairesuzy

27,296
8
54
52

+1 But inline-block isn't necessary. Inline works fine, see [this fiddle](http://jsfiddle.net/NGLN/2Ds6j/2/) – NGLN Jun 04 '11 at 11:01
so it isn't thanks!, so no need for IE hack either.. sorry was working on another way of doing it that would have meant the HTML be rewritten, forgot the change it back to basics - however if you wanted a width on the fieldset inline-block would possibly be the better option.. – clairesuzy Jun 04 '11 at 11:12
Is there no way I can align the text above the fieldset tags without using an absolute positioning? I'm not exactly looking to have an exact position of the text; I just want the text above the fieldset elements. – Nisto Jun 04 '11 at 14:44
you could move the labels inside the fieldset, and make them `display:block;` without the positioning and extra padding. – clairesuzy Jun 04 '11 at 16:08
I'm trying `display:block;` for `` but it isn't really working as expected. Is there something I'm missing? I removed the `position:absolute;` and `padding:1.25em;` codes. – Nisto Jun 04 '11 at 16:24
`legends` are a pain, I was still working with `label` **inside** the `fieldset` though admittedly `label` is likely the wrong element and I'd be inclined to use a `h4` element or something, in which case that's a natural block element anyway.. have added code to answer – clairesuzy Jun 04 '11 at 16:31
I think you may've misunderstood. I want the titles at the top of the elements, just like it would look like in a table. I just didn't want to use absolute positioning, because the position of the elements could differ, and thus the titles' position would have to differ as well. – Nisto Jun 04 '11 at 16:43
I did wonder about your second question ;) - so you do only want it to look like my first answer, but without the positioning?.. hmm not sure about that, with a table that would take two rows to achieve. Ok so can you give a sample of where my first answer fails for you.. is it that the fieldsets could go over to "rows"? – clairesuzy Jun 04 '11 at 16:54
The thing is, that if I use absolute positioning, it would add the titles at the very top of the page, and that is definitely not what I want to do. I'm using this code: http://jsfiddle.net/sKgcs/ , see how the titles collapse with the other content? That's why I don't want to use absolute positioning. – Nisto Jun 04 '11 at 17:14
AH OK, you missed the bit in the answer about wrapping all of fieldsets in an element (`div#form`) though you maybe have an existing `form` element, make this element `position:relative;` this along with the top padding means the title stays relative to the actual "row" rather than going over your main content: **however** where this will still fall down is if the "rows" go over to two lines (narrow the window) - http://jsfiddle.net/clairesuzy/7Qk5d - I've changed the titles to `h4` in this example if you try to replace that with `legend` you'll see what I mean by `legends` being a pain! – clairesuzy Jun 04 '11 at 17:37

Arranging fieldset elements like a typical table-design

2 Answers2

Working Example

Linked

Related