I was looking for answers, but could not find anything that solves my problem.
I have a website with dynamic content. I want the content to fall into the columns whenever possible in order to minimize scrolling.
Elements have dynamic heights.
xxx item 1 xxx | xxx item 4 xxx
xxxxxxxxxxxxxx | xxxxxxxxxxxxxx
xxxxxxxxxxxxxx |------------------
------------------| xxx item 5 xxx
xxx item 2 xxx | xxxxxxxxxxxxxx
xxxxxxxxxxxxxx |------------------
------------------| xxx item 6 xxx
xxx item 3 xxx | xxxxxxxxxxxxxx
xxxxxxxxxxxxxx | xxxxxxxxxxxxxx
But when the size of the browser window changes, I want to put the contents in a list, so that a table with one column.
I know about media queries, but how do I configure it to fit into a two-column layout when the window is wide enough?
It is also important that the elements (the "group" div in the HTML below) are not halved at the bottom.
HTML content (using KnockoutJS for dynamic data, content within the Container groups is repeated due to the foreach attribute in the Container groups):
<div data-bind="foreach: $data.groups" class="groupsContainer">
<div class="group">
<div data-bind="text: $data.name" class="groupTitle"></div>
<table data-bind="foreach: $data.fields" class="fieldsContainer">
<tr>
<td data-bind="text: $data.name" class="fieldName"></td>
<td data-bind="template: { name: $data.typeId, data: $data}" class="fieldValue"></td>
<td class="valueChanged" data-bind="if:$data.valueChanged"><img
src="resources/images/control-state-edited.png" /></td>
</tr>
</table>
</div>
</div>
CSS
.groupsContainer {
-webkit-column-width: 20em;
-webkit-column-gap: 2em;
-webkit-column-rule: 1px solid #eee;
-webkit-column-count: 2;
-moz-column-width: 20em;
-moz-column-gap: 2em;
-moz-column-rule: 1px solid #eee;
-moz-column-count: 2;
-ms-column-width: 20em;
-ms-column-gap: 2em;
-ms-column-rule: 1px solid #eee;
-ms-column-count: 2;
column-width: 20em;
column-gap: 2em;
column-rule: 1px solid #eee;
column-count: 2;
}