Looking to create a unique box layout inspired by this posterboard design:
Currently, my boxes have fixed widths and resizable heights based on their content. However, I'm struggling to get them to stack horizontally like the example above. Any ideas on how to achieve this effect?
Here's what I have tried so far: http://jsfiddle.net/SEe42/1/ I attempted using the max-height attribute to push the boxes to the next column, but they continue to stack vertically.
html:
<!doctype html>
<body>
<div class="container">
<div class="panel">
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo ino
</div>
<div class="panel">
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque i
</div>
<div class="panel">
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo accusantium doloremque laudantium, totam
</div>
</div>
</body>
css:
.container {
width: 500px;
max-height: 300px;
}
.panel {
display: block;
position: relative;
width: 100px;
margin: 10px 5px 10px 5px;
border-style: solid;
}