Hraaig Hraaig - 1 year ago 56
SQL Question

order divs in columns and prevent vertical free space

Let's say, we have a website, which contains 5 columns: "Daily", "Weekly1", "Weekly2", "Monthly1", "Monthly2".

Now there is a script, which gets data from a MySQL Database in an unsorted sequence (there is no way to sort by query I think) and these Datasets ("cards" with specific height) should be shown in the dataset-corresponding column.

How to achieve this?

What I have is that the "cards" are placed in right column, but there is vertical blank space between the cards, if another card was placed in another column before.

Is there a way to achieve this in css or do I have to do a workaround in php or JavaScript?

-edit- Very minimal and not 100% working, but my actual test-file :)

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">

background-color: darkolivegreen;
width: 20%;
left: 0%;
height: 80vh;
background-color: aqua;
border: solid 1px;

left: 20%;
width: 20%;
height: 80vh;
background-color: yellow;
border: solid 1px;
left: 40%;
width: 20%;
height: 80vh;
background-color: green;
border: solid 1px;
left: 60%;
width: 20%;
height: 80vh;
background-color: gray;
border: solid 1px;
left: 80%;
width: 20%;
height: 80vh;
background-color: deeppink;
border: solid 1px;

position: relative;
background-color: bisque;
border: solid 1px;
height: 7vh;

<div class="spalte1">spalte1</div>
<div class="spalte2">spalte2</div>
<div class="spalte3">spalte3</div>
<div class="spalte4">spalte4</div>
<div class="spalte5">spalte5</div>

<div class="spalte3 card">Karte1</div>
<div class="spalte1 card">Karte2</div>
<div class="spalte5 card">Karte3</div>
<div class="spalte4 card">Karte4</div>
<div class="spalte1 card">Karte5</div>


-edit- actually, i can't provide php, because i am rewriting my code and add the ordering on the page as a "feature". my actual code is just writing the cards in a table from left to right :)


CREATE TABLE `tkarten` (
`id` int(11) NOT NULL,
`Kartennummer` int(11) NOT NULL,
`Beschreibung` text NOT NULL,
`erledigt` tinyint(1) NOT NULL,
`inBearbeitung` tinyint(1) NOT NULL,
`wann` enum('daily','weekly','monthly','') NOT NULL,
`fmn` enum('f','m','n') NOT NULL

-- Daten für Tabelle `tkarten`

INSERT INTO `tkarten` (`id`, `Kartennummer`, `Beschreibung`, `erledigt`, `inBearbeitung`, `wann`, `fmn`) VALUES
(1, 1, 'Karte 1 mach irgendwas hauptsache hier steht was', 0, 0, 'daily', 'm'),
(3, 2, 'Karte 2 macht auch irgendwas ... hauptsache hier steht was', 1, 0, 'weekly', 'n'),
(4, 3, 'Auch bei der dritten Karte haben wir arbeit', 0, 0, 'weekly', 'n'),
(5, 4, 'Die vierte Karte ist nicht so wichtig', 0, 0, 'monthly', 'm'),
(6, 5, 'Wir haben 5 voll... jetzt kann schon einer gegen sich selbst poker spielen', 0, 0, 'weekly', 'm'),
(7, 6, 'noch ne sechste Karte, weils so sch&ouml;n war.', 0, 0, 'monthly', 'f');

column "wann" = daily, weekly or monthly
column "fmn" = weekly1 or 2 and monthly 1 or 2

Answer Source

Here's a simple solution for (fixed) columns with cards in it:


.column {
  border: 1px solid #aaa;
  padding: 5px;
  position: absolute;
  width: 100px;
  display: table;
  clear: both;
  list-style: none;

.column1 {
  left: 0px;
.column2 {
  left: 150px;
.column3 {
  left: 300px;

.card {
  border: 1px solid #ededff;
  background: #ededed;
  margin-top: 2px;

// html
<ul class="column column1">
    <li class="card">card1</li>
    <li class="card">card4</li>

<ul class="column column2">
    <li class="card">card2</li>

<ul class="column column3">
    <li class="card">card3</li>
    <li class="card">card5</li>
    <li class="card">card6</li>

This approach is easier than trying to position (absolute) several divs depending on it's content above some other divs...

You might as well wrap those columns in another set of ul-li if you don't want them to be positions absolute.

For the php-part I can't give an answer yet, as there is no php-code yet to look at...