Positioning a Comment Input Field - css

Question

What is a good way to give the input field below the three characteristics listed?
Characteristics:
-Always 30 px from the left side of the browser window.
-Always 30 px below the words "Add a comment" if no comments have been added.
-Always 30 px below the preceding comment if one or more comment(s) has (have) been added.
Thanks in advance,
John
HTML / PHP Code:
<div class="addacomment"><label for="title">Add a comment:</label></div>
<div class="commentbox"><input class="commentsubfield" name="title" type="title" id="title" maxlength="1000"></div>
CSS (thusfar I have no declarations for the "commentbox" selector):
.commentsubfield { width: 390px; height: 90px; border: 1px solid #999999; padding: 5px; }
.addacomment
{
position:absolute;
width:250px;
left:30px;
top:180px;
text-align: left;
margin-bottom:3px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color:#000000;
}

Answer 1

First off, you don't need those <div>s. You can just add class="addacomment" to the label.
So you've got this:
<label class="addacomment" for="title">Add a comment:</label>
<?php print $your_comments_if_any; ?>
<input class="commentsubfield" name="title" type="title" id="title" maxlength="1000">
I'm not sure what DOCTYPE you're using, but you get the idea. Now for the CSS:
If you want to position something relative to the page, it's a good idea to keep the margins of the page in mind. Assuming the default, you'll want to set any margins or padding to 0:
html, body {
margin: 0;
padding: 0;
}
Now, the positioning you've done on .addacomment is basically keeping you from getting the result you want. I've stripped out the unnecessary stuff for clarity:
.addacomment {
display: block; /* override the default inline display */
margin-left: 30px; /* The 30px from the left you wanted */
}
Next, .commentsubfield only needs margins added to it:
.commentsubfield {
margin: 30px 0 30px 30px;
[your other styles]
}
That should give you the following result (this is an actual screenshot from Opera 10.10 OSX), although I find separating the label from its field quite weird:
form element positioning example http://img.skitch.com/20100329-pbyj117655wig4pfh8estxw9me.jpg
I would recommend keeping the input and corresponding label together.
Hope I understood your question correctly, and hope this helps.