Forum Moderators: not2easy
I'd like the left side right aligned and the right side left aligned such that the end of all questions and beginning of all textboxes are vertically aligned in the center.
I can do this in seconds with a two columned table where each column is aligned as desired.
I thought it might go:
<div class="centerContainer">
<span class="leftHalfLabel> First Name:</label></span>
<span class="rightHalfAnswer">
<input type="text" id="UserFName" />
</span>
</div>
where
.centerContainer
{
width:100%;text-align:center;
}
.leftHalfLabel
{
width:50%;
font-weight:bold;
text-align:right;
position:static;
left:0px;
top:0px;
margin-left:0px;
}
.rightHalfAnswer
{
position:relative;
left:0px;
top:0px;
margin-left:2em;
margin-top:0px;
text-align:left;
margin-bottom:12px;
}
I have struggled for days now trying to do this correctly with CSS. I've tried divs; spans; relative positioning; absolute positioning and static. I'm flailing in a beginner state at this point. Any ideas out there? Your advice is greatly appreciated.
Lisa
.Left { width: 50%; float: left; }.Right { width: 50%; float: left; }
.leftHalfLabel { display: block; text-align: right; }
.rightHalfAnswer { display: block; }
...
<div class="Left">
<span class="leftHalfLabel"> First Name:</span>
<span class="leftHalfLabel"> Name:</span>
</div>
<div class="Right">
<span class="rightHalfAnswer"><input type="text" id="UserFName" /></span>
<span class="rightHalfAnswer"><input type="text" id="Text1" /></span>
</div>
That what you're trying to do? (The display: blocks are only there because you're using spans.) You'll probably need to do something with heights as well to stop the columns getting out of sync.
Obviously the styling needs a little work...
The problem you are going to ruin into is the length of the answer (or question) will affect the height of the space and therefore the question may not align with the answer.
On solution is to assign a fixed height to your <p>. You may also have to assign a fixed width to the container, emphasis on 'may' and then have the container center in the page.
<style type="text/css">
#container {
width: 800px; /* Do whatever width works for you */
margin: 0 auto;
text-align: left;
}
#left {
width: 48%; /* 50% might cause a problem */
margin: 0;
padding: 5px; /* If you increasse the padding, decrease the width of the div - remember an element's true width is the width PLUS margins PLUS padding PLUS borders */
text-align: right;
}
#left p {
display: block; /* This is somewhat redundant since p is a block element */
height: 50px; /* may have to be adjusted and should be same as right */
}
#right {
width: 48%; /* 50% might cause a problem */
margin: 0;
padding: 5px;
text-align: left; /* redundant, left is default */
}
#right p {
display: block; /* This is somewhat redundant since p is a block element */
height: 50px; /* may have to be adjusted and should be same as left */
}
</style>
HTML
<div id="container">
<div id="left">
<p>Question 1</p>
<p>Question 2</p>
</div>
<div id="right">
<p>Answer 1</p>
<p>Answer 2</p>
</div>
</div>
One other option is, instead of assigning padding to the <div> is put a margin on the <p>'s. Put say margin-right: 5px; for the <p>'s in the left <div> and margin-left: 5px; for the <p>'s in the right <div>.
Hope this helps.
Marshall
[#*$!.com...]
EDIT: hmmm, the domain name seems to be in a filter, just do a search for 'prettyaccessibleforms' and you should find it.
another option is to use fieldset, legend and label [w3.org]. their structure seems suited to this purpose.
There is a thread in the library, Table-less CSS Forms [webmasterworld.com], and using the code in there it would be quite easy to achieve and also from an HTML perspective you can add the 'relationship' between the question and the answer using "for" attribute on the label.
here's some sample code based entirely on Wertigon's example in the above thread:
CSS:
form, label, input { font-size : 1em; }
fieldset { width: 700px; margin: 0 auto; padding: 10px 20px; }
legend {border: 1px solid #000; padding: 5px;}
label {
position: relative; /* makes this the 'containing block' for the Absolutely Positoned input element */
width: 330px; /* see 20px left margin on input to center with 'cellspacing' */
display: block; /* required because label is an inline element by default */
text-align: right; /* right align text in label */
margin: 20px 0;
background: #ffd;
}
label input {
position: absolute;
top: 0;
left: 100%; /* position at right side of label */
margin-left: 20px; /* adds a gap between label and input */
width: 350px;
}
br { display : none; }HTML:
<p>This page is based entirely on <a href="http://www.webmasterworld.com/forum83/3758.htm">Wertigons CSS forms thread</a></p>
<form method="post" action="">
<fieldset id="qanda">
<legend>Questions & Answers</legend>
<label for="a1">Please enter your name:<input type="text" name="a1" id="a1" /></label><br />
<label for"a2">Would you like to share your email?:<input type="text" name="a2" id="a2" /></label><br />
<label for="a3">What is the nature of your question:<input type="text" name="tel" id="a3" /></label><br />
</fieldset>
</form>
note: <label> [w3.org] is an inline element and so it can only contain other inline elements, which <input> is.
-Suzy
