Is it possible to fix this css without position:relative?

Question

I am trying to create a comment box which works but I am just having some minor issues, I am trying to create it like this

http://puu.sh/cBbFh/16a66b64d3.png

Which I know how to do but completely ruins the view of it in different screen sizes.

MY CSS:

.search69 {
padding: 40px;
background: #232323;
}

MY CODE (USING PHP AND HTML)

        <div class="search69">


        <?php

if(isset($_POST['submit'])  
    && !empty($_POST['name']) 
    && !empty($_POST['comment']) ){

$name=$_POST['name'];
$comment=$_POST['comment'];
$submit=$_POST['submit'];


$insert=mysql_query("INSERT INTO comment (name,comment) VALUES ('$name','$comment') ");
echo "<meta HTTP-EQUIV='REFRESH' content='0; url=service.php'>";
}
else
{
echo "";
}
?>





        <form class="comments" action="service.php" method="POST">

<table>

<tr><td><h2>Name: </h2><br><input type="text" name="name" required/></td></tr>
<tr><td colspan="2"><h2>Comment:</h2></td></tr>
<tr><td colspan="5"><textarea name="comment" rows="10" cols="32" required></textarea></td></tr>
<tr><td colspan="2"><input type="submit" name="submit" value="Comment"></td></tr>

</table>
</form>



<?php


$getquery=mysql_query("SELECT * FROM comment ORDER BY id DESC");
while($rows=mysql_fetch_assoc($getquery))
{
$id=$rows['id'];
$name=$rows['name'];
$comment=$rows['comment'];
echo '<h2><hr size="1"/>Posted By..<br>' . $name . '<h2><br/>' . '<br/>' . $comment . '<br/>' . '<br/>' . '<hr size="1"/>'
;}



?>



</div>

Any idea's? Thanks!

Answer 1

---

Aside - You need to update your PHP

There is no more support for mysql_* functions, they are officially deprecated, no longer maintained and will be removed in the future. You should update your code with PDO or MySQLi to ensure the functionality of your project in the future.

---

Put the <table> down, Sarah, and we'll forget this ever happened.

• The table is removed along with its <td> and <tr> elements

• The form is wrapped in a div

• The div wrapper is given a sane max-width

• The form elements are positioned with display: block to move them to their own lines

• The labels are wrapped in <label> with the for attribute matching it's input / textareas id attribute.

• The submit comment is changed to the <button> element. The button works the same way, but is more flexible when it comes to CSS styling

• The <hr>'s are replaced with borders

Working Example

.formContainer {
  padding: 20px;
  background: #232323;
  color: #FFF;
  max-width: 500px;
}
h2 {
  font-weight: normal;
}
h2 span {
  display: block;
}
input,
textarea,
label {
  display: block;
  margin: 10px 0;
}
textarea {
  width: 99%;
  height: 200px;
}
form {
  border-bottom: solid 1px #FFF;
}
form button {
  padding: 10px 40px;
  margin-bottom: 10px;
}
.formContainer p {
  font-size: 1.2em;
  text-transform: uppercase;
}
.formContainer p:last-child {
  padding-bottom: 10px;
  border-bottom: solid 1px #FFF;
  margin: 0;
}
label {
  text-transform: uppercase;
}

<div class="formContainer">
  <form class="comments" action="service.php" method="POST">

    <label for="name">Name</label>
    <input type="text" id="name" name="name" required/>
    <label for="comment">Comment</label>
    <textarea name="comment" id="comment" required></textarea>
    <button type="submit" name="submit" value="Comment">Comment</button>


  </form>

  <h2>Posted By<span>Matt</span></h2>
  <p>I love puppies!</p>


</div>

Copy Paste

<div class="formContainer">

<?php
if(isset($_POST['submit'])  
    && !empty($_POST['name']) 
    && !empty($_POST['comment']))
{

$name=$_POST['name'];
$comment=$_POST['comment'];
$submit=$_POST['submit'];

    // !! This needs to be replaced with PDO / mysqli !!
    // !! At the moment this is wide open for SQL injection !!
    $insert=mysql_query("INSERT INTO comment (name,comment) VALUES ('$name','$comment') ");
    echo "<meta HTTP-EQUIV='REFRESH' content='0; url=service.php'>";
}

?>





<form class="comments" action="service.php" method="POST">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required/>
    <label for="comment">Comment</label>
    <textarea name="comment" id="comment" required></textarea>
    <button type="submit" name="submit" value="Comment">Comment</button>
</form>



<?php


$getquery=mysql_query("SELECT * FROM comment ORDER BY id DESC");
while($rows=mysql_fetch_assoc($getquery))
{
    $id=$rows['id'];
    $name=$rows['name'];
    $comment=$rows['comment'];
    echo '<h2>Posted By<span>' . $name . '</span></h2> <p>' . $comment . '</p>';
}



?>



</div>