I’ve been searching like mad how to split an unordered list <ul> into two columns and haven’t found an easy solution. By using combined info from a few sites I figured out an easy way to do it. If you already know how to do this then mozie on down folks. Here it is:
Make a <div class=”double_column_list”> and put a <ul> in it with some list items. Set the <li> class to display at 50% width and float it to the left.
CSS
.double_column_list li {float: left; width: 50%;}HTML
<div class="double_column_list">
<ul>
<li>Awesome Stuff</li>
<li>Awesome Stuff</li>
<li>Awesome Stuff</li>
<li>Awesome Stuff</li>
</ul>
</div>Result
- Awesome Stuff
- Awesome Stuff
- Awesome Stuff
- Awesome Stuff
Boosh, 2 column unordered lists.
I plan to try this out, very cool. When I have wanted two columns in the past, I made a table.
Then in the table cells unordered lists were made. This method is cool, no need to make the tables. Thanks!
I am upgrading our web site and I used your
two column list on one page and it works
cool. I want to know could I use this in a site map. I tried but it runs together. how do I separate the list. Thanks!
VRY6
After the I receive no line break when I begin a paragraph of text, and ideas?
after the that is
Guess I can’t type html in here
after the closed DIV I receive no line break when I begin a new paragraph, any ideas?
Hi Joseph,
Did you add the css to float each list item left and make it only 50% width? You can add html if you enclose it in pre tags.
Like this:
Here is what I am dealing with:
.double_column_list li {float: left; width: 50%; }
Computer is running slow
Error messages
Computer stops responding
Blue Screens
Your computer doesn’t bootup
Stop “0×0000000″ errors
Computer randomly reboots
Clicking, whining, or other loud noises
Computer will not power on
Error messages during bootup
I begin to type here, but there is no line break between these words and the above
How do you type html in here?
Joseph, enclose your html in pre tags. http://www.w3schools.com/tags/tag_pre.asp
.double_column_list li {float: left; width: 50%; }
Computer is running slow
Error messages
Computer stops responding
Blue Screens
Your computer doesn’t bootup
Stop “0×0000000″ errors
Computer randomly reboots
Clicking, whining, or other loud noises
Computer will not power on
Error messages during bootup
<!–Official Yearbook of the United Kingdom–>
I type here but there is no space between this and Error messages during bootup
Hi Joseph,
I’m sorry, I’m a little unclear on what your problem is. Could it just be a margin issue? Try adding more margin-bottom on the div to push the text below down. It’s hard to help without seeing the code.
-Garrett
Well using pre tags to show html in this forum is not working for me
Joseph, I’m sorry – you want to enclose the html in code tags not pre: http://www.w3schools.com/tags/tag_phrase_elements.asp
ok, here goes:
I have
.double_column_list li {float: left; width: 50%;}up in my style sheet area
Then I have
when I render the html, it shows that there is no paragraph space between Error Messages during bootup and Sometimes. It is as if I am typing a new sentence and not a paragraph.
Joseph,
First, I recommend you add font-weight:bold to your ul instead of using one big bold tag.
The reason you’re not getting any space below the list is because you need to add some margin. Example:
.double_column_list { margin-bottom:10px;}