Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    creating 2-column list with CSS & HTML lists

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

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,096
    Thanks
    23
    Thanked 594 Times in 593 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •