How to position boxes like a posterboard with CSS?


Tags: javascript,html,css,design

Problem :

Trying to make a page of boxes that looks like this posterboard layout: http://try.time.ly/

Right now, all of my boxes have fixed widths and resizable heights (depending on the length of content/pictures). However, I can't get them to stack like they do in the above layout. Any suggestions?

This is what I have so far: http://jsfiddle.net/SEe42/1/ I was hoping that the max-height attribute would push the boxes to the next column over to the right, but they just keep stacking from the bottom.

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;    
}


Solution :

Demo

Responsive, css only solution using CSS column properties

html

<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 class="panel">voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo accusantium doloremque laudantium, totam voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo accusantium doloremque laudantium, totam</div>
    <div class="panel">voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo accusantium doloremque laudantium, totam</div>
    <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>

css

body {
    font: 1em/1.67'Open Sans', Arial, Sans-serif;
    margin: 0;
    background: #e9e9e9;
}
.container {
    margin: 1.5em;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
}
.panel {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}
@media only screen and (min-width: 400px) {
    .container {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}
@media only screen and (min-width: 700px) {
    .container {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}
@media only screen and (min-width: 900px) {
    .container {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}
@media only screen and (min-width: 1100px) {
    .container {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}

    CSS Howto..

    How can I center the column vertically in bootstrap mobile mode?

    How can I disable shrinking/resiziing images in Twitter Bootstrap?

    jQuery Show/Hide for and

    How to define an elements style using CSS to be on top of an other? Why in my case z-index isn't effective?

    CSS: How to create a
  • with 100% width
  • How to make a div fill the height until the next absolutely positioned element

    CSS - How to Draw a Multi-Coloured Line?

    How do I enlarge images on a web page

    My YouTube video wont show in iframe

    How to style Menu border/outline in JavaFX8 using CSS?

    How to save(download) HTML page with all images, css etc in Android?

    How to Center Rotated text with CSS

    How to set padding-left to my custom textbox in css?

    How to Target Twitter Bootstrap <768px and 480px Breakpoints

    How to modify this CSS based Accordion to work with multiple accordions on the same page?

    How to specify discrete mapper style in cytoscapejs?

    How can I make my web application look correct in IE 8 and 9? [closed]

    How do I make two arrows in css

    How to make content appear under absolute position

    How to make menu bar with nested submenu css

    How should I approach the solution to develope a static, Responsive HTML file that seems to have functionality beyond CSS/HTML capabilities?

    How do I override inline CSS with Class CSS? [duplicate]

    How to add css in django Updateview or Create view form

    How can I get my drop-down to not open unless the li is hovered?

    How to serve SVG using C# so that it will render as a CSS background image

    Hide one div when showing another with JavaScript

    How can `animation-play-state` in CSS be initially set to `paused` and changed to `running`?

    How can I turn off hardware acceleration for certain HTML elements via CSS?

    How to make a search bar clippable without pushing down elements, using 2 inputs

    How can I avoid my headers and footers being broken when displaying content wider than the viewport?