Barny74 Posted January 12, 2017 Share Posted January 12, 2017 Hi , New to PHP and really appreciate any help I can get. I have written dome code for a search bar , as below. I have styles the results into boxes , but cant figure out how to get the results side by side rather than one above the other. I would like to have maybe 3 or 4 in a horizontal row , then the same below , until the search ends. Really hope someone can help, Thanks Search.php if (isset ($_POST['search'])) { $search = $_POST['search']; $search = "%" . $search . "%"; // MySQL wildcard % either side of search to get partially matching results // No wildcard if you want results to match fully}$stmt = $conn->prepare("SELECT * FROM whisky_results WHERE name LIKE :name ORDER BY name ASC"); // Use = instead of LIKE for full matching$stmt->bindParam(':name', $search); $stmt->execute();$count = $stmt->rowCount(); // Added to count no. of results returnedif ($count >= 1) { // Only displays results if $count is 1 or morewhile ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { echo "<br>";echo "<div class=\"results\">"; echo "<div class=\"result_name\">"; echo "<b>Whisky Name:</b><br>"; echo $row['name']; echo "</div>"; //echo "<div class= \"result_description\">"; //echo "Whisky Description: "; //echo $row['description']; //echo "</div>"; echo "<div class= \"result_highprice\">"; echo "Highest Price Paid: £"; echo $row['highest_price']; echo "</div>"; echo "<div class= \"result_lowprice\">"; echo "Lowest Price Paid: £"; echo $row['lowest_price']; echo "</div>"; echo "<div class= \"average_price\">"; echo "Average Price Paid: £"; echo $row['average_price']; echo "</div>"; echo "<div class= \"last_price\">"; echo "Last Price Paid: £"; echo $row['last_price']; echo "</div>"; echo "<div class= \"last_date\">"; echo "Last date sold: "; echo $row['last_date']; echo "</div>";echo "</div>"; echo "<br>";}} else { echo " Sorry no records were found";} Quote Link to comment Share on other sites More sharing options...
Solution Barand Posted January 12, 2017 Solution Share Posted January 12, 2017 Easiest way is to put the results in divs with float:left and width ~= 25% Quote Link to comment Share on other sites More sharing options...
Barny74 Posted January 12, 2017 Author Share Posted January 12, 2017 So in the code at the momemt i have a <div> called "results" , i use that to style the boxes aroumd the actual results. If i add float amd width to that ot should actually float them horizontally. I was umder the impression that i would jave to change some actual PHP code. I am away from my PC for a few hours now but will check it out later. I may have been looking at this to hard and not seen that its a CSS code ratjer than CSS. Fingers crossed and thanks for the reply. Quote Link to comment Share on other sites More sharing options...
Strider64 Posted January 13, 2017 Share Posted January 13, 2017 I know I going to get boos , but what about using a table? It looks like a perfect candidate for it's mainly data you're playing around with. An contrary to current thinking - Tables can be stylized nicely with CSS. Quote Link to comment Share on other sites More sharing options...
Barny74 Posted January 13, 2017 Author Share Posted January 13, 2017 Hi. Thanks. This is my problem , and i have not had time to look at the previous suggestion due to being at work. Its seems to be one peice of code that produces all the results so if i use tables all i will get is a stack of tables. I can use anything , i just need to find out how to get the results side by side. Baring in mind its just one peice of php code that produces all results. Quote Link to comment Share on other sites More sharing options...
Barand Posted January 13, 2017 Share Posted January 13, 2017 Here's an example for you <?php $sql = "SELECT make , model , year FROM cars ORDER BY year DESC"; $res = $pdo->query($sql); $cardata = ''; foreach ($res as $car) { $cardata .= <<<CARDATA <div class="car"> <b>Make:</b> {$car['make']}<br /> <b>Model:</b> {$car['model']}<br /> <b>Year:</b> {$car['year']} </div> CARDATA; } ?> <!DOCTYPE html> <html> <head> <title>Cars</title> <style type="text/css"> body { font-family: sans-serif; font-size: 10pt; } #wrapper { width: 810px; min-height: 100px; margin-left: auto; margin-right: auto; overflow: auto; } .car { width: 140px; height: 50px; padding: 15px 25px; margin: 5px; float: left; border: 1px solid gray; border-radius: 5px; } </style> </head> <body> <div id="wrapper"> <h3>Cars</h3> <?=$cardata?> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Barny74 Posted January 13, 2017 Author Share Posted January 13, 2017 Easiest way is to put the results in divs with float:left and width ~= 25% Quote Link to comment Share on other sites More sharing options...
Barny74 Posted January 13, 2017 Author Share Posted January 13, 2017 Hi. Thank you so much dor this answer. I have had so many convoluted answers amd this was the simplest and it worked. Thanks for being so forward and down to earth. Very much appreciated Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.