Make a div-row collapse in html/css/django - html

Question

I have recently designed a really small django template looking like this :
The html code looks like this :
{% for category in categories %}
<div class="row">
<div class="column">
<h3>{{ category }}</h3>
<ul>
{% for elem in elems %}
<li><a href=...>{{ elem }}</a></li>
{% endfor %}
</ul>
</div>
</div>
{% endfor %}
And the CSS code :
.row:before,
.row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
.column{
width: 50%;
}
I would like to have the rows to collapse if there is enough space.
In my example, I would like the Test column to go just behind the Pet one (only separated by the padding).
Is there any css property which could help me achieving this ? Or should I change my approach ?
Thanks !

Answer 1

The divs have no defined width. They will take up the entire page such that there is no horizontal room left. What you want is a responsive design that changes that width based on the size of the boxes, and the size of the screen.
Using the #media selector to limit a specific style to the size of the current browser window will allow the size of the divs to respond as you desire:
#media screen and (max-width : 600px) {
.box {
width: 50%;
}
}
#media screen and (min-width : 601px) {
.box {
width: 33.3%;
}
}
JS Fiddle
Hope that helps!
EDIT: Having read your comments I now see what you mean. Saying collapse confused me and I assumed you were asking for something dynamic.
The best way to solve this is to prioritise columns over rows. It's not a true table so they aren't even rows exactly.
<div class="column">
<div class="row">
<h3>Drinks</h3>
<ul><li>item 1</li><li>item 2</li></ul>
</div>
<div class="row">
<h3>Food</h3>
<ul><li>item 1</li><li>item 2</li></ul>
</div>
</div>
<div class="column">
<div class="row">
<h3>Pet</h3>
<ul><li>item 1</li></ul>
</div>
<div class="row">
<h3>Test</h3>
<ul><li>item 1</li><li>item 2</li></ul>
</div>
</div>
Using the following CSS will give the desired result.
.column {
width:50%;
float:left;
}
Using your code this would equate to:
{% for category in categories %}
<div class="column">
<div class="row">
<h3>{{ category }}</h3>
<ul> {% for elem in elems %}<li><a href=...> {{ elem }}</a></li>{% endfor %}</ul>
</div>
</div>
{% endfor %}
This answer has gotten quite long, I apologise!
New JS FIddle