creating 2-column list with CSS & HTML lists

stocktrader · 10-27-2012, 12:34 PM

I am wondering if it is possible to create a 2-column list using the CSS/HTML list tags (UL, LI). I created a test here, but can't get it to work.

http://jsfiddle.net/2sAmP/138/

I created a container DIV to wrap the individual DIVS, but I can't get them to wrap to the right after the inner divs hit the bottom of the master DIV. I want the columns to show the inner DIVs as follows:

1 6
2 7
3 8
4 9
5 10

FWIW, I CAN get get them to wrap "down" when i set the inner DIVs to {float:left}.

sunfighter · 10-27-2012, 02:45 PM

To do boxes try this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#box { border:3px solid red;width:70%;height:350px;}
.item { border:3px solid black;height:50px;}
#leftbox{
width: 65%;
	float:left;
	padding: 10px;
}
#rightbox{
width: 25%;
	float:right;
	padding: 10px;
}
</style>
</head>

<body>

<div id="box">
  <div id="leftbox">
	  <div class="item">1</div>
	  <div class="item">2</div>
	  <div class="item">3</div>
	  <div class="item">4</div>
	  <div class="item">5</div>
	  <div class="item">6</div>
  </div>
  <div id="rightbox">
	  <div class="item">7</div>
	  <div class="item">8</div>
	  <div class="item">9</div>
	  <div class="item">10</div>
	  <div class="item">11</div>
	  <div class="item">12</div>
  </div>
</div>


</body>
</html>

Notice the extra divs to do the positioning inside the main div.

stocktrader · 10-28-2012, 01:07 PM

The problem is that I wanted the list to come form the output of a single MySQL query (sorry, I should have mentioned that). I also don't want to have to play with the data (through MySQL of PHP) in any way. I just want to be able to create the 2-column list by formatting the output with HTML/CSS.

Excavator · 10-28-2012, 02:08 PM

Hello stocktrader,
To make multicolumn lists is easy, you just have to float the li's. The problem comes when you want it ordered like your example. If the input is in order like 1,2,3,4 then floating those li's makes it look like this:

1 2
3 4
5 6

See this example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	background: #fc6;
}
#container {
	width: 800px;
	margin: 30px auto;	
	padding: 50px 0 450px;
	background: #fff;
	box-shadow: 0 0 20px #8493A6;
	overflow: auto;
}
ul {
	width: 100px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
li {
	width: 50px;
	float: left;
}
</style>
</head>
<body>
    <div id="container">
    	<ul>
        	<li>1</li>
        	<li>2</li>
        	<li>3</li>
        	<li>4</li>
        	<li>5</li>
        	<li>6</li>
        	<li>7</li>
        	<li>8</li>
        	<li>9</li>
        	<li>10</li>
        </ul>
    <!--end container--></div>
</body>
</html>

Your example code on jsFiddle is a little messed up. There is no such thing as float: top; so that may be one reason it's not acting like you want. Another problem is specifying a height, it's usually best to let a container expand to contain it's contents rather than limit it to a set height.

Look at some examples I have of lists here.