title: how can i design a CSS style for comment boxes for a Social Networking site. Need some sample code
body: <p>i have created a Social networking site in PHP. but am not good in CSS.  Comments for images, and texts(status) are not good looking, does not have a good separation from each others.</p>
  
  <p>So can anyone give me a CSS style for my site(like facebook having), which follows below logic,</p>
  
  <pre><code>  &lt;table class="myTable" width="400"&gt;
   &lt;tr  class="image_posts"&gt;&lt;td&gt; &lt;img src="img1.jpg"&gt;  &lt;/td&gt;&lt;/tr&gt;
          &lt;tr class="image_comments"&gt;&lt;td&gt;   COMMENT-1     &lt;/td&gt;&lt;/tr&gt;
          &lt;tr class="image_comments"&gt;&lt;td&gt;   COMMENT-2     &lt;/td&gt;&lt;/tr&gt;
          &lt;tr class="image_comments"&gt;&lt;td&gt;   COMMENT-3     &lt;/td&gt;&lt;/tr&gt;
  
      &lt;tr  class="text_posts"&gt;&lt;td&gt; STATUS-1    &lt;/td&gt;&lt;/tr&gt;
          &lt;tr class="image_comments"&gt;&lt;td&gt;   COMMENT-1   &lt;/td&gt;&lt;/tr&gt;
          &lt;tr class="image_comments"&gt;&lt;td&gt;   COMMENT-2   &lt;/td&gt;&lt;/tr&gt;
          &lt;tr class="image_comments"&gt;&lt;td&gt;   COMMENT-3   &lt;/td&gt;&lt;/tr&gt;
   &lt;/table&gt;
  </code></pre>
  
  <p>Conditions:</p>
  
  <blockquote>
    <ul>
    <li>long "comments or status"(for example, text with 100 letters) should                                                         not exceeds the table width. it should split into 2-3 rows.   </li>
    <li>Comments and text(status) posts should be easily separately identifiable by the user.</li>
    </ul>
  </blockquote>
  
  <p>Can anyone please give me the code. i have done with my graduation project. i know PHP, but dont know CSS. so please, help me.. </p>
  
  <p>Given below my PHP Code to display image posts and text posts with Comments. </p>
  
  <pre><code>$query = "select image_id as id, username, time_stamp, title as text_and_title, size, image_url, privacy from image_posts where username='".$_SESSION['valid_user']."'  UNION select text_id as id, username, time_stamp, text, NULL, NULL,privacy from text_posts where username='".$_SESSION['valid_user']."' order by time_stamp desc";
      //  image_id as id,    username,    time_stamp,    title as text_and_title,     size,      image_url,       privacy
      // text_id as id,      username,    time_stamp,    text,                NULL,   NULL,          privacy
  
      $result = $conn-&gt;query($query);
  
      $num_rows = $result-&gt;num_rows;
  
  
      if($num_rows &gt; 0) {
  
  
          for($count = 0; $count &lt; $num_rows; $count++ ) {
  
              $row = $result-&gt;fetch_object();
  
  
  
              if($row-&gt;image_url == NULL) { // then it is a text(status) post
  
  
  
  echo "&lt;tr class='fixed_tr'  &gt;&lt;td &gt; Posted On:".$row-&gt;time_stamp."&lt;br /&gt;&lt;label style=\"width:30px\"&gt;".$row-&gt;text_and_title."&lt;/label&gt;&lt;/td&gt;&lt;/tr&gt;" ;
  
  
  
  // display comments for texts
  $q = "select comment_id,username,comment, time_stamp from comments where text_id='".$row-&gt;id."'  order by time_stamp DESC";
  $res = $conn-&gt;query($q);
  $n = $res-&gt;num_rows;
  if($n &gt; 0) {
  for($c = 0; $c &lt; $n; $c++){
      $r = $res-&gt;fetch_object();
      echo "&lt;tr class='tr_forComments'  &gt;&lt;td &gt;Commented by:".$r-&gt;username."  on  ".$r-&gt;time_stamp." &lt;br&gt;".$r-&gt;comment."&lt;/td&gt;&lt;/tr&gt;";
  
  
  }//for
  
  } 
  
  }
  </code></pre>
  
  <p>given below my CSS code for table,</p>
  
  <pre><code>table.fixed { 
  table-layout:fixed; 
  }
  table.fixed td { 
  overflow: hidden; 
  }
  
  
  
  .tr_forComments{
       font-family: "lucida grande", tahoma, verdana, arial, sans-serif;  
       background-color: #eceff6;  
          border: 1px solid #d4dae8;  
          color: #333333;  
          padding: 10px;  
          font-size: 13px;  
          font-weight: bold;  
  }
  </code></pre>