Making a comment box appear below an HTML table that may vary in size

Hello,

For the code below, how can I change the CSS to make the form have the attributes listed below? I have included the most recent relevant CSS that I have tried (and it did not work).

Thanks in advance,

John

Attributes:

-The words “Add a comment” always display 30 pixels below the bottom of the HTML table being generated.

-The top of the form’s input field always displays 40 pixels below the bottom of the HTML table being generated.

-The top of the form’s submit button always displays 150 pixels below the bottom of the HTML table being generated.

$sqlStr = "SELECT comment.comment, comment.datecommented, login.username
FROM comment
LEFT JOIN login ON comment.loginid=login.loginid
WHERE submissionid=$submissionid
ORDER BY comment.datecommented DESC 
LIMIT 100";			
			
$result = mysql_query($sqlStr);

$arr = array(); 
echo "<table class=\\"commentecho\\">";
while ($row = mysql_fetch_array($result)) { 
    echo '<tr>';
    echo '<td class="commentname1">'.$row["comment"].'</td>';
	echo '</tr>';
	echo '<tr>';
	echo '<td class="commentname2"><a href="http://www...com/sandbox/members/index.php?profile='.$row["username"].'">'.$row["username"].'</a>'.date('l, F j, Y &\
b\\sp &\
b\\sp g:i a &\
b\\sp &\
b\\sp  \\N\\E\\W &\
b\\sp \\Y\\O\\R\\K &\
b\\sp \\T\\I\\M\\E', strtotime($row["datecommented"])).'</td>';
	echo '</tr>';
	}
echo "</table>";	



 
echo '<form  action="http://www...com/sandbox/comments/comments2.php" method="post"> 
    <input type="hidden" value="'.$_SESSION['loginid'].'" name="uid">
	<input type="hidden" value="'.$submissionid.'" name="submissionid">  
	<input type="hidden" value="'.$submission.'" name="submission">
    
	
	<label class="addacomment" for="title">Add a comment:</label>
	
    <input class="commentsubfield" name="comment" type="comment" id="comment" maxlength="1000">  
	  
    <div class="commentsubbutton"><input name="submit" type="submit" value="Submit"></div> 
</form>
';

Relevant CSS:

table.commentecho {
	position:absolute;
   	left:30px;
	top:180px;
	text-align: left;
	font-family: "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: 15px;
	color: #000000;
	width: 800px;
	table-layout:fixed;
	background-color: #FFFFFF;
	border: 2px #FFFFFF;
	border-collapse: collapse;
	border-spacing: 2px;
	padding: 1px;
	text-decoration: none;
	vertical-align: text-bottom;	
	margin-bottom: 30px;
	
}

table.commentecho td {
   border: 2px solid #fff;  
   text-align: left; 
   height: 18px;
   overflow:hidden;
   
}

table.commentecho td a{
   padding: 2px;
   color: #000000;
   text-decoration: none;
   overflow:hidden;
   height: 18px;
}

table.commentecho td a:hover{
   background-color: #FFFFFF;
   padding: 2px;
   color: #FF0000;
   text-decoration: none;
   overflow:hidden;
   height: 18px;
}	

.commentname1 { width: 550px;
            overflow:hidden !important;
			color: #000000;
			vertical-align: 
			
}

.commentname2 { width: 50px;
            overflow:hidden !important;
			color: #793D00;
			font-family:Arial, Helvetica, sans-serif;
			font-size: 10px;
			font-weight: bold;
			height: 18px;
			padding-bottom: 22px;
			
}

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

.addacomment
	{
    display: block; /* override the default inline display */
    margin-left: 30px; /* The 30px from the left you wanted */
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#000000;
	}	
	
	
	
.commentsubbutton
	{
	display: block; /* override the default inline display */
    margin-left: 30px; /* The 30px from the left you wanted */
	width:250px;
	text-align: left;
    margin-bottom:3px;
    padding:0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 11px;
	color:#000000;
	}	

From a quick reading, it sounds like a job for

element {
    margin-top: Xpx;
}

But each element will push off the next, rather than off the table, so you wouldn’t put margin-top: 150px on the submit button, but just space it away from the element before it.

EDIT: ah, I notice that the table is positioned absolutely, which in general is not a good idea. That takes it out of the flow of the document, making it hard to position other elements in relation to it. What happens if you remove that?

On another site, someone gave me the idea to remove the absolute positioning and that has helped me make some progress on it.

Etiquettically speaking ( :slight_smile: ) it’s better to ask a question in one forum at a time. :wink:

Or you could post in other forums, just make sure that you post the links there, that way we can ensure we don’t waste our time answering something that has already been answered :). We always solve every thread here so … :slight_smile: