CODEWITHSUNDEEP
htmlcss
dzona
dzona

Reputation: 3751

Multiple div boxes in columns, ordered verticaly

I have changing number of divs (elements) and ordering them on page as follows:

1 2 3

4 5 6

7 8 9

Having tested it, it would work better phone book style, like this:

1 4 7

2 5 8

3 6 9

Is there any easy/css way to do so? Tnx in advance

Upvotes: 1

Views: 337

Answers (4)

Lewis Coulson
Lewis Coulson

Reputation: 46

You could try doing something like this - http://jsfiddle.net/HKxUf/

Create three columns consisting of div's with a col class. Inside of these place the appropiate div's.

Upvotes: 0

David Thomas
David Thomas

Reputation: 253328

Given that you're looking for CSS3 solutions, why not simply use column-count:

body {
    -webkit-column-count: 3;
    -o-column-count: 3;
    -moz-column-count: 3;
    -ms-column-count: 3;
    column-count: 3;
}
.box {
    width: 4em;
    height: 4em;
    line-height: 4em;
    counter-increment: box;
}

JS Fiddle demo.

References:

Upvotes: 2

Greg B
Greg B

Reputation: 813

You can try using a jquery columnizer plugin. I've used jquery.columnizer with success several times: http://welcome.totheinter.net/columnizer-jquery-plugin/

Upvotes: 1

Charles Lillo
Charles Lillo

Reputation: 365

You could use a grid layout in css to order them, and have them float, using something like one of these to generate it http://www.webdesignbooth.com/15-extremely-useful-css-grid-layout-generator-for-web-designers/. Or you could fix all their positions, which would be a more brute force way of doing it.

Upvotes: 0

Related Questions