How to make your bullet list appear side by side

bydan-mallette

1.1K followers

Updated 9 years ago

UPDATE => Feb. 27/2015 @ bottom of post

Hey guys, here's a little something I've learned recently. I wanted to make note of it for my own future reference and figured this way not only saves it for my own reference but makes it available for everyone else too. Hope this helps.

My last post required a really long bullet list and I wanted the items listed in side by side columns instead of every item being one beneath the other.

EXAMPLE:

The list as it appears:

• Item # 1

• Item # 2

• Item # 3

• Item # 4

• Item # 5

• Item # 6

• Item # 7

• Item # 8

The list as I want it:

• Item # 1 • Item # 5

• Item # 2 • Item # 6

• Item # 3 • Item # 7

• Item # 4 • Item # 8

To do this, I went into the TEXT section of my post in Wordpress and this is how the first list was coded.

<ul>
<li> Item # 1</li>
<li> Item # 2</li>
<li> Item # 3</li>
<li> Item # 4</li>
<li> Item # 5</li>
<li> Item # 6</li>
<li> Item # 7</li>
<li> Item # 8</li>
</ul>

The coding I used to make two side by side columns is:

<div style="float: left;">

Enter your content here.

</div>

This is what the coding now looked like:

<div style="float: left;">
<ul>
<li> Item # 1</li>
<li> Item # 2</li>
<li> Item # 3</li>
<li> Item # 4</li>
</ul>
</div>

<div style="float: left;">
<ul>
<li>Item # 5</li>
<li>Item # 6</li>
<li>Item # 7</li>
<li>Item # 8</li>
</ul>
</div>

If you want your list to look like this:

• Item # 1 • Item # 3 • Item # 5 • Item # 7

• Item # 2 • Item # 4 • Item # 6 • Item # 8

The coding is the same as the previous "2 column post" but you need to make 4 divisions.

Here is what that code would look like:

<div style="float: left;">
<ul>
<li> Item # 1</li>
<li> Item # 2</li>
</ul>
</div>

<div style="float: left;">
<ul>
<li>Item # 3</li>
<li>Item # 4</li>
</ul>
</div>

<div style="float: left;">
<ul>
<li> Item # 5</li>
<li> Item # 6</li>
</ul>
</div>

<div style="float: left;">
<ul>
<li>Item # 7</li>
<li>Item # 8</li>
</ul>
</div>

I hope I've explained this in an easy enough and visual enough way for anyone to understand. For me, this seems pretty easy to follow but I have done a little bit of programing in high school and college so I'm not reading it with beginner eyes so to speak. If something isn't clear, let me know and I'll try to make it better. Thanks guys and I wish you all great success.

UPDATE => Feb 27/2015

I don't know why but in one post, the info above works just fine but in the post I've been working on tonight, It just wouldn't work very well at all. After a few hours of playing around I found a slightly different way of doing this.

<div style="width: 500px;">
<div style="float: left; width: 200px;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<div style="float: left; width: 300px;">
<ul>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</div>
</div>

&nbsp;

&nbsp;

&nbsp;

The "&nbsp" is the code that is put there every time you hit ENTER. I had to put those there because the next paragraph appeared beside my bullet list instead of under. Not sure why but this did fix it.

Hopefully one of these two methods have help you achieve your goal, If not keep checking this post cause I will be updating it every time I find a new and/or better way of doing this. If anyone has found another way, feel free to share.