I have a list of items, say fixed size rectangle divs. I need to organize my content so that first half of the list goes in the left column, and the second half goes to the right one. If the number of items is not even, the left column has one item more. Is it possible to organize such a layout declaratively within a container? The enclosing container is twice as wide as each element (or a bit wider).
Example:
+-----+-----+ +-----+-----+ +-----+-----+ +-----+-----+
| 1 | | | 1 | 2 | | 1 | 3 | | 1 | 3 |
+-----+-----+ +-----+-----+ | 2 | | | 2 | 4 |
+-----+-----+ +-----+-----+
+-----+-----+ +-----+-----+ +-----+-----+ +-----+-----+
| 1 | 4 | | 1 | 4 | | 1 | 5 | | 1 | 5 |
| 2 | 5 | | 2 | 5 | | 2 | 6 | | 2 | 6 |
| 3 | | | 3 | 6 | | 3 | 7 | | 3 | 7 |
+-----+-----+ +-----+-----+ | 4 | | | 4 | 8 |
+-----+-----+ +-----+-----+
A content sample:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two columns, top-to-bottom, left-to-right</title>
<style>
.enclosing {
width: 210px;
background-color: lightgray;
}
.item {
width: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="enclosing">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>
</body>
</html>