HTML/CSS lists column sorting

Question

i have a little problem in sorting LI tags when i'm using column function. By default it is sorting normally but i had to use columns in CSS and after that my list is like this:

1 - 6
2 - 7
3 - 8
4 - 9
5 - 10

but i need something like this:

1 - 2
3 - 4
5 - 6
7 - 8
9 - 10

here is my code: jsfiddle

would you like to do this in table ?

Sulthan Allaudeen
– Sulthan Allaudeen

2014-04-01 09:43:47 +00:00
Commented Apr 1, 2014 at 9:43 — Sulthan Allaudeen
– Sulthan Allaudeen, Commented Apr 1, 2014 at 9:43
nope :( unfortunately i can't use table in my case

klaus
– klaus

2014-04-01 09:47:40 +00:00
Commented Apr 1, 2014 at 9:47 — klaus
– klaus, Commented Apr 1, 2014 at 9:47

Sm Yamashita · Accepted Answer · 2014-04-01 10:21:10Z

1

I found the way at Multiple column lists using one ul.

I try to use it. Here is DEMO

Demo code below :

ul {
  clear: both;
  width:450px;
  margin-bottom:20px;
  overflow:hidden;
}

li {
  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;
  margin-right: 10%;
}

#double li { 
  width:40%;
}

answered Apr 1, 2014 at 10:21

Sm Yamashita

2544 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

G.L.P · Accepted Answer · 2014-04-02 05:14:53Z

0

JSFiddle Link

CSS

.grid_1, .grid_2 {
    margin-left : 1.00%;
    margin-right : 1.00%;
    margin-bottom : 15px !important;
    float : left;
    display : block;
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
}
.grid_1 {
    width: 98%;
}
.grid_2 {
    width: 48%;
}
.bg {
    background-color:#ccc;
}

HTML:

<div class="grid_1 ">
    <div class="grid_2">
        <div class="grid_1 bg">1</div>
        <div class="grid_1 bg">3<br> dgdgdfgdfg<br> sdrfsdrfrter</div>
        <div class="grid_1 bg">5</div>
        <div class="grid_1 bg">7</div>
        <div class="grid_1 bg">9</div>
        <div class="grid_1 bg">11</div>
    </div>
    <div class="grid_2">
        <div class="grid_1 bg">2</div>
        <div class="grid_1 bg">4</div>
        <div class="grid_1 bg">6</div>
        <div class="grid_1 bg">8</div>
        <div class="grid_1 bg">10</div>
        <div class="grid_1 bg">12</div>
    </div>
</div>

edited Apr 2, 2014 at 5:14

answered Apr 1, 2014 at 10:57

G.L.P

7,2075 gold badges27 silver badges43 bronze badges

4 Comments

klaus Over a year ago

yes but there is the same problem now between 3 and 7 and between 9 and 12, it must be dynamic layout too

G.L.P Over a year ago

can u use <div> instead of unordered list?

klaus Over a year ago

unfortunately i can use only one grid

klaus Over a year ago

everything other is perfect

Rohit Azad Malik · Accepted Answer · 2014-04-01 09:47:27Z

0

You can try to this add float:left and define box-sizing:border-box; as like this

   ul {
        clear: both;
        margin: 0px auto;
        padding: 10px 0px 0 0px;
        width: 450px;
        z-index: 9; }

    ul li {
        background:#ededed;
        float:left;
    min-height:100px;
    width:50%;
-webikit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
        list-style: none;         
        margin-bottom: 10px;
        padding: 0px;

        }

Demo

answered Apr 1, 2014 at 9:47

Rohit Azad Malik

32.3k17 gold badges72 silver badges100 bronze badges

3 Comments

klaus Over a year ago

Every li had different height so if i delete min-height in your script it would be like so: jsfiddle :(

King King Over a year ago

@user3484379 I think min-height should be added to get the best appearance, otherwise your problem can be hardly solved, I don't understand why you want to remove min-height.

klaus Over a year ago

in my design i should have dynamically heights, so for nice appearance it must have different heights

G.L.P · Accepted Answer · 2014-04-01 10:29:53Z

0

Here is my code Updated URL

    ul {
    clear: both;
    margin: 0px auto;
    padding: 10px 0px 0 0px;
    position: relative;
    width: 450px;
    z-index: 9;
    display: block;
}
ul li {
    background:#ededed;
    text-align:left;
    display: block;
    float:left;
    list-style: none;
    margin: 0 1% 0 0;
    padding: 0px;
    width:49%;
}

Hope it helps

edited Apr 1, 2014 at 10:29

answered Apr 1, 2014 at 9:57

G.L.P

7,2075 gold badges27 silver badges43 bronze badges

2 Comments

klaus Over a year ago

yeah i tried same way too but there lefts space between 3/three and 6 - and between 8 and 10, because neighbour columns have different height

klaus Over a year ago

there is again spage but now between 4 and 6.. and if i append some rows see how it will look: [jsfiddle](bit.ly/1mHjZAg) but i need that every li was under the upper

Collectives™ on Stack Overflow

HTML/CSS lists column sorting

4 Answers 4

Comments

4 Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related