I am trying to figure out a way to split mySQL rows into HTML columns. I'm sorry if there is an easier way to ask this, but I can't wrap my head around it.
I have read through very many suggestions though none of them fit what I am looking for. I understand it is very easy to just float the information left and allow it to stack by itself. My problem is that I am showing information in a "card" form with two different sized cards and I would like them all to stack without gaps vertically.
For the purpose of showing this, I've given every card a number from 1-3. Every card numbered 1 should fit in the first column, and so on. example here
Normal floating left gives me something like this:
|1|2|3| |4|5|6| |7|8|9| This is the correct way to display the information, but it leaves gaps where large cards are next to small ones like in the example.
if I use a foreach loop in the php with a table or divs, I get something like this:
|1|2|3| ------- |4|5|6| ------- |7|8|9| Unfortunately, this is pretty much the same outcome. The larger cards push down the row leaving a large gap where a smaller card is.
I also understand that after the first visibile row, the most recent divs could potentially be pushed farther down in one column rather than another. for example, if column 1 has 6 'featured' or large cards, it would take 12 cards to fill the space beside it. I'm not worried about this.
The basic, stripped down code that I have right now is this:
<div class="container"> <?PHP $qry_questions = mysql_query("SELECT STATEMENT**"); $count = 0; while($row = mysql_fetch_array($qry_questions)){ $count++; /*GATHER INFORMATION*/ ?> <div class="HTML-formatting-here-with-php-echos"> </div> <?PHP } ?> </div> Now I'm just trying to figure out if I can make a statement in php that basically says: "if $count == 1, append this information into column 1, if $count == 2, append this into col 2, etc."
Is there any type of function that I can do to split this information like this and append the information without completely building a whole new row?
p.s. I've tried array_chunk() without the proper outcome.
EDIT: Here is the while loop
<div id="collective"> <div class="container"> <?PHP //FIND THE QUESTIONS ASKED AND INFORMATION ON THEM $qry_questions = mysql_query("SELECT * FROM mbr_qa_questions ORDER BY q_votes DESC" /* LIMIT 0, 10"*/); //LIMIT 0, 20 - 20 being how many to show at a time $num_rows = mysql_num_rows($qry_questions); $max_col = 3; $count = 0; //START THE LOOPING while($q_row = mysql_fetch_array($qry_questions)){ $q_id = $q_row['q_id']; $q_votes = $q_row['q_votes']; $q_answers = $q_row['q_answers']; $q_title = $q_row['q_title']; $q_description = $q_row['q_description']; $q_tags = $q_row['q_tags']; $q_user_id = $q_row['user_id']; $q_created = $q_row['q_created']; $q_modified = $q_row['q_modified']; $q_featured = $q_row['q_featured']; if($q_featured == 0){ $q_status = "normal"; } else { $q_status = "featured"; } //GET THE USERS USERNAME $qry_username = mysql_query("SELECT user_name FROM mbr_user_name WHERE user_id = '$q_user_id'"); $q_user_name = mysql_result($qry_username, 0); //FIND THE USERS POINTS $qry_points = mysql_query("SELECT point_amount FROM mbr_qa_points WHERE user_id = '$q_user_id'"); $q_user_points = mysql_result($qry_points, 0); //FIND OUT IF YOU FLAGGED IT $qry_flagged = mysql_query("SELECT * FROM mbr_qa_flagged WHERE q_id = '$q_id' AND user_id = '$user_id'"); $flagged = mysql_num_rows($qry_flagged); if($flagged >= 1){ $flaggedDiv = "<div class='q_flagged'> </div>"; } else { $flaggedDiv = "<div class='flagInnapropriate'> </div>"; } //FIND HOW MANY ANSWERS $qry_answers = mysql_query("SELECT * FROM mbr_answers WHERE q_id = '$q_id'"); $q_answers = mysql_num_rows($qry_answers); //FIND HOW MANY VOTES $qry_votes = mysql_query("SELECT * FROM mbr_votes WHERE q_id = '$q_id'"); $q_votes = mysql_num_rows($qry_votes); //GIVE EACH ENTRY A COLUMN NUMBER $count++; if($count >= 4){ $count = 1; } <div class="card <?= $q_status ?>"> <div class="top"> <div class="tag"> <div class="title">Votes</div> <div class="votes"> <div class="number"> <?= $q_votes ?> </div> </div> <div class="plus">+</div> </div> <div class="question"> <p><?= $count/* . $q_title*/ ?></p> </div> </div> <div class="middle"> <div class="elapsed"> <?PHP $time_since = $q_created; $time_now = time(); $timeElapsed = $time_now - $time_since; ?> Asked <?= elapsedTime($time_since) ?> ago by </div> <a class="profile" href="./profile.php?profile_name=<?= $q_user_name ?>"> <div class="avatar"> <img src="pieces/avatars/avatar.php?profile_id=<?= $q_user_id ?>&size=xsmall" /> </div> <div class="userName"> <?= $q_user_name ?> </div> <div class="points"> <?= $q_user_points ?>pts </div> </a> </div> <div class="bottom"> <div class="answer"> <div class="title"> Answers </div> <div class="numAnswers"> <?= $q_answers ?> </div> <div class="answersText"> Answers </div> </div> <div class="bestAnswer"> <div class="title"> Best Answer </div> <div class="description"> <p>Need to get highest rated answer here</p> </div> </div> </div> </div> } ?> </div> </div> The included newAnswerLayout.php is just the html formatting of each card.
ANOTHER EDIT:
I believe I just need to make three mySQL queries that select every nth row. Yes, the IDs on the rows are unique, but there is a possibility that some rows will be moved to another table which will leave gaps.
What I'm thinking now is to query the table, pull every third row, place that in column 1 and so forth, starting at the first entry.
EDIT 3: What I am looking for is to do a SQL query that grabs all of the information on every third row, starting on row 1, then I need to do another query of every third row, starting on row 2, then the same for row 3.
