2 Column List - Need Vertically

HTML & CSS
1

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


<!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>
2

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.


<!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>
3

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

An alternative (which validates):


<!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>
4

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:


<!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

5

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>.

6

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.

7

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:

<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

  $(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;
    }
  });

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

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?


<!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>