2 Column List - Need Vertically

**_Nikhil** · Oct 17, 2012 10:52

I have some check boxes & labels that display in a 2 column format. The content goes from left - right , then the next row & so on.
I need the content to go from top - bottom in first column & then top - bottom in the 2nd column. Is this possible ? I can't change (at the most make limited changes to) the HTML as the content comes from a database
Thanks

The content now is like
A B
C D
E F
G H

I need it like

A E
B F
C G
D H

Here is the HTML & CSS

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
#MyList {width:500px; list-style:none; margin:0 auto 0 auto;}
#MyList li {list-style-type:none; float:left; width:250px; }
#MyList li label{width:200px;	padding:2px 10px 0 8px; display:inline-block;}
</style> 
</head>
<body>
<ul id="MyList">

        <li><input id="i1" type="checkbox" /><label for="i1">A- Item List</label></li>
        <li><input id="i2" type="checkbox" /><label for="i2">B- Item List</label></li>
        <li><input id="i3" type="checkbox" /><label for="i3">C- Item List</label></li>
        <li><input id="i4" type="checkbox" /><label for="i4">D- Item List</label></li>
        <li><input id="i5" type="checkbox" /><label for="i5">E- Item List</label></li>
        <li><input id="i6" type="checkbox" /><label for="i6">F- Item List</label></li>
        <li><input id="i7" type="checkbox" /><label for="i7">G- Item List</label></li>
        <li><input id="i8" type="checkbox" /><label for="i8">H- Item List</label></li>
        <li><input id="i9" type="checkbox" /><label for="i9">I- Item List</label></li>
        <li><input id="i10" type="checkbox" /><label for="i10">J- Item List</label></li>
</ul>
</body>
</html>

**_Nikhil** · Oct 18, 2012 08:25

Never mind,
I got it for now. I'm putting half of the items from the database in a div & the rest in another floated div.
Although the div in a ul seems not a good idea, it is working.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css"> 
#MyList {width:500px; list-style:none; margin:0 auto 0 auto;}
#MyList li {list-style-type:none; float:left; width:220px; }
#MyList li label{width:150px;	padding:2px 10px 0 8px; display:inline-block;}
.group { width:240px;  overflow:hidden; float:left;}
</style> 
 
</head>
 
<body>
 
<ul id="MyList">
 
    <div class="group">
        <li><input id="i1" type="checkbox" /><label for="i1">A- Item List</label></li>
        <li><input id="i2" type="checkbox" /><label for="i2">B- Item List</label></li>
        <li><input id="i3" type="checkbox" /><label for="i3">C- Item List</label></li>
        <li><input id="i4" type="checkbox" /><label for="i4">D- Item List</label></li>
        <li><input id="i5" type="checkbox" /><label for="i5">E- Item List</label></li>
    </div>
    <div class="group">
        <li><input id="i6" type="checkbox" /><label for="i6">F- Item List</label></li>
        <li><input id="i7" type="checkbox" /><label for="i7">G- Item List</label></li>
        <li><input id="i8" type="checkbox" /><label for="i8">H- Item List</label></li>
        <li><input id="i9" type="checkbox" /><label for="i9">I- Item List</label></li>
        <li><input id="i10" type="checkbox" /><label for="i10">J- Item List</label></li>
    </div>
</ul>
 
</body>
</html>

**ronpat** · Oct 18, 2012 13:59

OK, second try. My deleted attempt was goofy <smile>. Needed caffein.

An alternative (which validates):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--



-->
<head>
    <title>template</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">

div {
    outline:1px solid lime;    /* LAYOUT TESTING */
    text-align:center;
}
.MyList {
    outline:1px solid magenta;    /* LAYOUT TESTING */
    list-style:none;
    text-align:left;
    width:225px;
    display:inline-block;
    padding:0;
    margin:0;
}
.MyList li {
    outline:1px solid cyan;    /* LAYOUT TESTING */
    list-style-type:none;
    width:225px;
}
.MyList li label {
    background-color:yellow;    /* LAYOUT TESTING */
    display:inline-block;
    width:185px;
    padding:2px 10px 0px 8px;
}

    </style>  
</head>
<body>
<div>
    <ul class="MyList">
        <li><input id="i1" type="checkbox" /><label for="i1">A- Item List</label></li>
        <li><input id="i2" type="checkbox" /><label for="i2">B- Item List</label></li>
        <li><input id="i3" type="checkbox" /><label for="i3">C- Item List</label></li>
        <li><input id="i4" type="checkbox" /><label for="i4">D- Item List</label></li>
        <li><input id="i5" type="checkbox" /><label for="i5">E- Item List</label></li>
    </ul>
    <ul class="MyList">
        <li><input id="i6" type="checkbox" /><label for="i6">F- Item List</label></li>
        <li><input id="i7" type="checkbox" /><label for="i7">G- Item List</label></li>
        <li><input id="i8" type="checkbox" /><label for="i8">H- Item List</label></li>
        <li><input id="i9" type="checkbox" /><label for="i9">I- Item List</label></li>
        <li><input id="i10" type="checkbox" /><label for="i10">J- Item List</label></li>
    </ul>
</div>
</body>
</html>

**dresden_phoenix** · Oct 18, 2012 15:09

as ronpat pointed out, the only VALID direct child of a UL or OL is an LI. So wrapping your LIs in DIVs is a nono. Ron's suggestion is valid, and logically acceptable ;except perhaps in the case of an ordered list in which your count would reset... but there are HTML ways around this too.

CSS3 offers columned layout, however support is still spotty and somewhat buggy.

IF you know can anticipate the height of each LI ( lets say you know you text isnt going to wrap, for example, so all LIs are the same height) you could do this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
#MyList {width:500px; list-style:none; margin:0 auto 0 auto; border:1px solid red}
#MyList li {list-style-type:none;  width:250px;  height: 3ex}
#MyList li label{width:200px;	padding:2px 10px 0 8px; display:inline-block;}
.seccol , .seccol ~ li {margin-left: 250px;}
.seccol { margin-top: -15ex;} 
</style> 
</head>
<body>
<ul id="MyList">

        <li><input id="i1" type="checkbox" /><label for="i1">A- Item List</label></li>
        <li><input id="i2" type="checkbox" /><label for="i2">B- Item List</label></li>
        <li><input id="i3" type="checkbox" /><label for="i3">C- Item List</label></li>
        <li><input id="i4" type="checkbox" /><label for="i4">D- Item List</label></li>
        <li><input id="i5" type="checkbox" /><label for="i5">E- Item List</label></li>
        <li class="seccol"><input id="i6" type="checkbox" /><label for="i6">F- Item List</label></li>
        <li><input id="i7" type="checkbox" /><label for="i7">G- Item List</label></li>
        <li><input id="i8" type="checkbox" /><label for="i8">H- Item List</label></li>
        <li><input id="i9" type="checkbox" /><label for="i9">I- Item List</label></li>
        <li><input id="i10" type="checkbox" /><label for="i10">J- Item List</label></li>
</ul>
</body>
</html>

That should cover most modern browsers. For even broader support, of course, you could replace .seccol ~ li with a class, '.col2item' for example. and add "class='col2item'" to each LI AFTER the one with class "seccol".

Hope that helps

**ronpat** · Oct 19, 2012 03:13

dresden_phoenix, another simply elegant example. Very clever, and very appreciated. Thank you for posting. Now I gotta read about "ex" units of measure <smile>.

**_Nikhil** · Oct 22, 2012 11:21

Thanks guys for your posts. I will use 2 unordered lists.
@dresden_phoenix - That's a nice method. but at the moment I am not sure about using that fixed negative margin.

**coder911** · Oct 23, 2012 03:59

I had a similar problem and I used a jQuery solution. I am not sure if this would be acceptable but I'll post it anyway. The solution is to let your server side code display the items in one UL then use jQuery to distribute the items into two or more columns. Example:

HTML Code:

<ul id="MyList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
</ul>

JavaScript/jQuery

Code JavaScript:

  $(function() {
    var numberOfColumns = 3;
    var itemsPerColumn = Math.ceil($('#MyList').children("li").length / numberOfColumns);
    var previousColumn = $('#MyList');
    var currentColumn;
    var i;
    for (i = 1; i < numberOfColumns; i++) {
      currentColumn = $('<ul id="MyList-' + i + '"></ul>').insertAfter(previousColumn);
      previousColumn.children('li:gt(' + (itemsPerColumn - 1) + ')').appendTo(currentColumn);
      previousColumn = currentColumn;
    }
  });

Code CSS:

  ul {
    float: left;
    margin-left: 10px;
    border-left: 5px solid #CCC;
    padding-left: 30px;
    list-style-type: decimal-leading-zero;
  }

**ronpat** · Nov 14, 2012 20:39

Hey, d_p! Looks like we can sneak by without adding a class to item 6 (or creating column divs) by using the adjacent sib selector. Whadda-ya-think? Cross-browser compatible?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?896957-2-Column-List-Need-Vertically

-->
<head>
    <title>template</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">

.MyList {
    border:1px solid red;
    list-style-type:none;
    width:500px;
    height:15ex;    /* REQUIRED. (comment me out and reload!) */
    margin:0 auto;
}
.MyList li {
    width:250px;
    height:3ex;
}
.MyList li label {
    display:inline-block;
    width:200px;
    padding:2px 10px 0 8px;
}
li + li + li + li + li + li {margin-top:-15ex;margin-left:250px;}
li + li + li + li + li + li + li {margin-top:0ex;}

    </style>
</head>
<body>

<ul class="MyList">
    <li><input id="i1" type="checkbox" /><label for="i1">A- Item List</label></li>
    <li><input id="i2" type="checkbox" /><label for="i2">B- Item List</label></li>
    <li><input id="i3" type="checkbox" /><label for="i3">C- Item List</label></li>
    <li><input id="i4" type="checkbox" /><label for="i4">D- Item List</label></li>
    <li><input id="i5" type="checkbox" /><label for="i5">E- Item List</label></li>
    <li><input id="i6" type="checkbox" /><label for="i6">F- Item List</label></li>
    <li><input id="i7" type="checkbox" /><label for="i7">G- Item List</label></li>
    <li><input id="i8" type="checkbox" /><label for="i8">H- Item List</label></li>
</ul>
<ul class="MyList">
    <li><input id="i1" type="checkbox" /><label for="i1">A- Item List</label></li>
    <li><input id="i2" type="checkbox" /><label for="i2">B- Item List</label></li>
    <li><input id="i3" type="checkbox" /><label for="i3">C- Item List</label></li>
    <li><input id="i4" type="checkbox" /><label for="i4">D- Item List</label></li>
    <li><input id="i5" type="checkbox" /><label for="i5">E- Item List</label></li>
    <li><input id="i6" type="checkbox" /><label for="i6">F- Item List</label></li>
    <li><input id="i7" type="checkbox" /><label for="i7">G- Item List</label></li>
    <li><input id="i8" type="checkbox" /><label for="i8">H- Item List</label></li>
    <li><input id="i9" type="checkbox" /><label for="i9">I- Item List</label></li>
    <li><input id="i10" type="checkbox" /><label for="i10">J- Item List</label></li>
</ul>

</body>
</html>

User Tag List

Thread: 2 Column List - Need Vertically

Thread Tools

Display

2 Column List - Need Vertically

Bookmarks

Bookmarks

Posting Permissions