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 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.
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>