css List Type Question

Discussion in 'CSS' started by Silver89, Dec 24, 2008.

0
  1. #1
    Hi,

    I'm trying to create a list that goes down A-Z but then when it gets to the bottom of the container instead of go outside the height of the <ul> it starts a new line

    For example:

    A F
    B G
    C H
    D I
    E J
     
    Silver89, Dec 24, 2008 IP
  2. abcdefGARY

    abcdefGARY Well-Known Member

    Messages:
    665
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    110
    #2
    Hmm, could you make 2 rows of list items?

    Not sure if this helps but, if order doesn't matter, this makes it zig zag. I'm not sure if this is what you're looking for...

    <html>
<head>
	<title></title>
	<style type="text/css">
	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		width: 200px; /* With each item being 100px, you will have 2 rows. */
	}

	ul li {
		display: block;
		float: left;
		width: 100px;
	}
	</style>
</head>
<body>
<ul>
	<li>A</li>
	<li>B</li>
	<li>C</li>
	<li>D</li>
	<li>E</li>
	<li>F</li>
	<li>G</li>
	<li>H</li>
	<li>I</li>
	<li>J</li>
</ul>
</body>
    Code (markup):
    :eek:
     
    abcdefGARY, Dec 24, 2008 IP