CODEWITHSUNDEEP
htmlcss
Poiple Shadow
Poiple Shadow

Reputation: 195

Making column layout which flows in order

I have three columns on my site and I like the way it looks, although the code isn't in order (they are like blog posts so I would expect the first to be the most recent then in order the the last post.

But because of the structure I have to put them in order across the columns separately which is a little fiddly and I am sure there's a better solution. I am not a big fan of Javascript and if it's possible using CSS on its own I would be so thankful..

http://www.poipleshadow.com/Children-Charity-Pictures.htm

its all ok, although I would prefer it if the items in the columns were in date order, at the moment they are in date order but per column.

So in conclusion i want them to be displayed in the source like

A B C D E F G H I

but displayed

A  B  C
D  E  F
G  H  I

Upvotes: 0

Views: 164

Answers (3)

brutusmaximus86
brutusmaximus86

Reputation: 264

An easy solution is to use an grid system, like the grid fromt http://purecss.io/grids/ Yes it contains also a CSS reset and default styles, but it saves you alot of time. You can 

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/base-min.css">


<div class="pure-g">

    <div class="pure-u-1-3">
        A
    </div>

    <div class="pure-u-1-3">
        B
    </div>

    <div class="pure-u-1-3">
        C
    </div>

    <div class="pure-u-1-3">
        D
    </div>

    <div class="pure-u-1-3">
        E
    </div>
    <div class="pure-u-1-3">
        F
    </div>

</div>

Upvotes: 0

umbriel
umbriel

Reputation: 751

Small note, this is only possible in firefox and chrome. Pure masonry layout in CSS is simply not possible. For internet explorer fall back look into packery: http://packery.metafizzy.co/

Edit: If all your boxes have the same height: then add float:left to each of the boxes

DEMO: http://jsfiddle.net/gabrieleromanato/tQANc/
DEMO V2: http://jsfiddle.net/umbriel/TzkZ8/
DEMO V3 IE compatible: http://jsfiddle.net/umbriel/6e6Qy/ HTML:

<div id="container" class="cols">
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box one"></div>
    <div class="box three"></div>
    <div class="box two"></div>
    <div class="box five"></div>
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box six"></div>
    <div class="box three"></div>
    <div class="box two"></div>
</div>

Css:

#container {
    width: 100%;
    max-width: 700px;
    margin: 2em auto;
}
.cols {
    -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;
}
.box {
    margin-bottom: 20px;
}
.box.one {
    height: 200px;
    background-color: #d77575;
}
.box.two {
    height: 300px;
    background-color: #dcbc4c;
}
.box.three {
    background-color: #a3ca3b;
    height: 400px;
}
.box.four {
    background-color: #3daee3;
    height: 500px;
}
.box.five {
    background-color: #bb8ed8;
    height: 600px;
}
.box.six {
    background-color: #baafb1;
    height: 200px;
}

Upvotes: 1

Pumpkinpro
Pumpkinpro

Reputation: 847

You just put all your div class="blog-item vevent"> one after another in only one <div class="col span_1_of_3">(and remove its width from css) give them Width,marginand float:left;

Upvotes: 0

Related Questions