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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Multi Column List

    Hello all. I've been playing with CSS to try and make my unsorted lists show in a multi column view opposed to a vertical list. After playing around for a while I figured a way to do it. I just have two issues hopefully someone can help with.

    First I created a new stylesheet with the following:
    #multi ul {
    width: 700px;
    list-style-type:none;
    }
    #multi li{
    width:180px;
    margin:15px 0 0 0;
    padding:0 10px 0 0;
    line-height:15px;
    float:left;
    }


    Within my page I just wrapped my unsorted list the following way.
    <div id="multi>
    <ul>
    <li>info</li>
    <li>info</li>
    <li>info</li>
    <li>info</li>
    <li>info</li>
    <li>info</li>
    <li>info</li>
    <li>info</li>
    <li>info</li>
    </ul>
    </div>
    <p></p>

    The list displays correctly, meaning the list is broken into columns side by side, but unless I put that <p></p> at the after the </div> elements below the div, like a horizontal line, floats up in the middle of the page. If I put the <p></p> then everything lines up correctly.

    However. The other problem I have is, when I put the <p></p> after the div, and everything lines up correctly, it shows up fine in Firefox. In IE however, there is a huge space between the unsorted list and the content above (which is just text).

    Any direction would be greatly appreciated.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello perappgui,
    your <p></p> is clearing the float. There are better ways to do that though -
    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">
    body {
    	background: #eeeeee;
    	text-align:center;
    	font-family:Verdana, Geneva, sans-serif;
    	font-size:11px;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #wrap {
    	width: 760px;
    	background: #fff;
    	margin: 0 auto;
    overflow: auto;
    }
    #multi ul {
    width: 700px;
    list-style-type:none;
    background: #6F0;
    overflow: auto;
    }
    #multi li{
    width:180px;
    margin:15px 0 0 0;
    padding:0 10px 0 0;
    line-height:15px;
    float:left;
    }
    </style>
    </head>
    <body>
        <div id="wrap">
    <div id="multi">
    <ul>
    <li>info</li>
    <li>info</li>
    <li>info</li>
    <li>info</li>
    <li>info</li>
    <li>info</li>
    <li>info</li>
    <li>info</li>
    <li>info</li>
    </ul>
    </div>
    
        <!--end wrap--></div>
    </body>
    </html>
    I put a color in each element to show it. Remove the two overflow:auto; lines to and watch what happens to the background colors.

    Read about clearing floats here.

    The code you posted has an error in it - it's missing a "
    Within my page I just wrapped my unsorted list the following way.
    <div id="multi>
    <ul>
    <li>info</li>
    <li>info</li>
    <li>info</li>
    <li>info</li>
    <li>info</li>
    <li>info</li>
    <li>info</li>
    <li>info</li>
    <li>info</li>
    </ul>
    </div>
    <p></p>
    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

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Ok, playing with this a little more...
    I gave it a little margin and padding to make it look nicer. You can see how the li's are ordered though.
    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>multi-column ul</title>
    <style type="text/css">
    body {
    	background: #eeeeee;
    	text-align:center;
    	font-family:Verdana, Geneva, sans-serif;
    	font-size:11px;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #wrap {
    	width: 760px;
    	background: #fff;
    	margin: 0 auto;
    	overflow: auto;
    }
    #multi ul {
    	width: 700px;
    	margin: 20px auto;
    	padding: 0 0 15px 0;
    	list-style-type: none;
    	background: #6F0;
    	overflow: auto;
    }
    #multi li{
    	width: 180px;
    	float: left;
    	margin: 15px 0 0 0;
    	padding: 0 10px 0 10px;
    	line-height: 15px;
    }
    
    </style>
    </head>
    <body>
    <div id="wrap">
            <div id="multi">
                <ul>
                    <li>one</li>
                    <li>two</li>
                    <li>three</li>
                    <li>four</li>
                    <li>five</li>
                    <li>six</li>
                    <li>seven</li>
                    <li>eight</li>
                    <li>nine</li>
                </ul>
            </div>
    <!--end wrap--></div>
    </body>
    </html>
    You would need to order your li's like this to place them in the correct column -
    Code:
    <div id="multi">
                <ul>
                    <li>one</li>
                    <li>four</li>
                    <li>seven</li>
                    <li>two</li>
                    <li>five</li>
                    <li>eight</li>
                    <li>three</li>
                    <li>six</li>
                    <li>nine</li>
                </ul>
            </div>
    Look at a 2-column list example 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

  • #4
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply and advice. I added the overflow and it worked perfect in FF. However in IE, it doesnt seem to translate as well. It places the list at the bottom of the page so there is a large gap between my page heading and the list. FF, looks great though. Any ideas?


    Oh and the missing quotation after multi was a typo. =)

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    The code I posted works correctly in FF3, IE7 and IE6.
    If it's actiing weird when you try to incorporate it into your site we'll have to see your code.

    A link would be best but if you quote your code here, please use code tags.
    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

  • #6
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Whelp, you are great. I actually just fiddled with the width of the UL and everything is displayed correctly within all browsers.

    The site is actually on my local machine, or I would've sent a link. Thank you for your help.


  •  

    Posting Permissions

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