Search code examples
inlinecssdirection

Vertical inline-block?

Currently I have something like this. The "Page" and "Row" elements are created dynamically using javascript.

The problem rises when there are multiple Pages, and a Row in the Page 1 is deleted, for example. The empty space should be filled by the element that is below, if the empty space is at the end of the page, then the first element of the next page should fill the empty space, and so on. At the end it should look like this.

I can solve this rearranging/recreating the entire PageCont.

Is there a way I can achieve this using pure CSS? So the rearranging would be handled by the rendering engine of the browser.

Something like this inline-block but with vertical direction.

Any help is highly apreciated.

​HTML:

<div class="PageCont">
    <div class="Page">
        <div class="Row">1</div>
        <div class="Row">2</div>
        <div class="Row">3</div>
        <div class="Row">4</div>
    </div>
    <div class="Page">
        <div class="Row">5</div>
        <div class="Row">6</div>
        <div class="Row">7</div>
        <div class="Row">8</div>
    </div>
    <div class="Page">
        <div class="Row">9</div>
    </div>
</div>​

CSS:

.PageCont
{
    height: 300px;
    width: 350px;    

    border:2px solid red
}

.Page
{
    float:left;
    margin-left:10px;
}

.Row
{
    height:50px;
    width:50px;

    background-color:blue;
    color:white;
    margin-top:10px;
}

​

Solution

  • The operation could be successfully performed trivially if it included horizontal wrapping, with plain simple CSS. However since this case involves vertical wrapping javascript be necessary with your current implementation. If you were to use columns you wouldn't need the javascript and CSS is all that's needed.
    Here is a fiddle where I've implemented it http://jsfiddle.net/eQvaZ/

    The HTML is as follows:

    <body>
    <div class="pageCont">
        <div  class="Row">C1</div>
        <div class="Row">C2</div>
        <div  class="Row" id="to-remove">C3</div>
        <div  class="Row">C4</div>
        <div  class="Row">C5</div>
        <div  class="Row">C6</div>
        <div  class="Row">C7</div>
    </div>
    <div>Removing C3 in 5 seconds...</div>
</body>

    The CSS:

    .pageCont{
    column-count:2;
    column-rule:0px;
    -webkit-column-count: 2;
    -webkit-column-rule: 0px;
    -moz-column-count: 2;
    -moz-column-rule: 0px;
    padding:10px;
    height: 250px;
    width: 200px;
    border:2px solid red
 }

.Row {
    height:50px;
    width:50px;
    background-color:blue;
    color:white;
    margin-bottom:10px;
 }

    The bit of JavaScript to remove an item:

    setTimeout( function(){
var to_remove = document.getElementById('to-remove');
to_remove.parentNode.removeChild(to_remove);
}, 5000);

    Let me know if you have any questions regarding this implementation.