CODEWITHSUNDEEP
htmlcsssortinghtml-lists
klaus
klaus

Reputation: 13

HTML/CSS lists column sorting

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

Upvotes: 1

Views: 2456

Answers (4)

G.L.P
G.L.P

Reputation: 7207

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>

Upvotes: 0

G.L.P
G.L.P

Reputation: 7207

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

Upvotes: 0

Sm Yamashita
Sm Yamashita

Reputation: 254

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

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

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

Upvotes: 0

Related Questions