Styling a Comment Box

Question

Hello,

The code below has some text that says "Add a comment:," an input field, and a submission button. What is the best way to give them the characteristics below?

Thanks in advance,

John

Characteristics:

-Have "Add a comment:" be 30 px below the bottom of something called <div class="subcommenttitle">'.$submission.'</div> if there are no comments.

-Have "Add a comment:" be 30 px below the bottom of the previous comment if there is one comment or if there are two or more comments.

-Have the top of the input field always be 30 px below the text "Add a comment:"

-Have the top of the submit button always be 30 px below the bottom of the input field.

Code:

 <label class="addacomment" for="title">Add a comment:</label>
        <input class="commentsubfield" name="title" type="title" id="title" maxlength="1000">  

        <div class="commentsubbutton"><input name="submit" type="submit" value="Submit"></div>

Accompanying CSS that I tried (but it didn't work):

.commentsubbutton
    {
    margin: 20px 0 30px 30px;
    text-align: left;
    margin-bottom:3px;
    padding:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 11px;
    color:#000000;
    }       

.addacomment
    {
    margin: 30px 0 30px 30px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:#000000;
    }       

.commentsubfield { margin: 30px 0 30px 30px; width: 390px; height: 90px; border: 1px solid #999999; padding: 5px; } 

Answer 1

Try adding display:block; to your different class elements. A "label" element, for example, is a default "inline" element -- which means your margins on top/bottom won't work at all.