Create Classified style website in php

[oshopindia]

Sir I Want to create Website which look like newspaper classified

 

But I cant create Clasified <td> tag With Auto height which i atetched in below picture

 

Help me to do that

[imageek]

You shouldn't be using tables for layout. Use CSS. The Bootstrap, or Zurb Foundation, CSS frameworks will help you with this by providing classes to create grids. If you want something similar to that in the image you'd create 4 grid columns. 

[possien]

You could do something fairly simple with css and a MySql Database.  You might create a #main div for the ad content and a div class for the ad itself in css something like:

#main{-moz-column-count: 3;
-webkit-column-count: 3;
-webkit-column-gap: 2px;
column-count: 3;​}

.ads_class{border: 2px solid blue; /*a border around each ad*/
padding: 5px; /*A little padding within ads*/}

 

 

Assuming you are taking your ads from a database, within your #main div,  it might look something like:

<?php
while($ads = mysqli_fetch_array($result)){
//assuming your table might have image, title, price, and text
 $photo = "<img src=thumbnails/".$ads['image']." width='75px'/>";
 $title = "<h3>".$ads['title']."<h3>";
 $price = $ads['price'];
 $text = $ads['msg_date'];

echo "<div class='ads_class'>";
echo $photo;
echo $title;
echo $text;
echo "</div>";
}
?>

This will give you three columns of ads.  You could also remove the columns and  create a fixed width for the .ad_class divs and float the divs to the left but the results would not evenly stack.  

Edited February 7, 2014 by possien

[imageek]

Possien, I'm not convinced that your solution is going to work across all browsers and mobile devices. That's why I often suggest a grid framework.

[possien]

I always try to go simple first.  Yes, the display on small devices would be crammed up.  Moo tools, Jquery, Bootstrap and others are nice but it's nicer to understand what the basic concepts are that are being employed and build from that point.   A simple media query to collapse the columns based on screen width works well.  I have used a variety of jscript tools and they add a lot of overhead and server calls.  Consider using 3g or 4g devices and having to download 100-200k of js, fonts, and css where only a small portion is used to obtain a grid view.  It may take too long to load and the user moves on.