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.