Build Your Own Business Website header image

How to Create a 2 Column List in a Post or Page

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This member asks how to create a 2 column list within the WordPress content area.  I demonstrate a method using 2 unordered lists each wrapped in a div tag that I style so that they float side by side.  This involves using the HTML view of the WordPress editor and adding code to custom.css

Video Transcript

But what she wants to do is she wants to have a 2 column list that can be displayed side by side in the content area. And so, what we’re going to do here then is to create that list. Now and so, I’m going to do that here on this site. If we select Edit this Page right here on the page and I’m in my HTML view and the reason why I’m in my HTML view is because what we’re going to do is called an unordered list. And in order to make them sit left and right, we are going to create 2 unordered lists and we’re going to wrap them in a div tag.

So if we hit enter and we just start off the bat and we’re going to create our first HTML div tag and then in order for us to be able to assign CSS to it, we have to assign a class to it. So we’re going to say class equals and I’m just going to say left-list. Remember, there can be no spaces in these class names. And then, the closing tag there and then drop down the line and then select this unordered list button and then select a list item button and type our first list item which we’re going to say first left side list item. And then we’ll close the list item and then we’ll create a new list item and it’ll be the 2nd left side list time and we’ll close the list item. And if we were finished with our list then we would select the closing UL tag which will drop the… which will close out that list. And so, if we update this and view our page, we’ve got essentially a…oh, I forgot to close out my div so it threw a fit. Yeah, I’ve got an opening div here so I need to close the /div. Now, update. So we’ve got an opening div tag, closing div tag, an opening UL tag, a closing UL tag, opening LI tags and closing LI tags. Everything’s got an opening and closing tag there.

So then if we go back to view page, now our sidebar’s where it belongs and you’ve got these 2 list items sitting here. So then if we were going to create our next list, we would… I would just to the same thing. I would just copy this, paste it, and change this to right. It doesn’t really matter what you put in there but this is the… we’ve created 2 lists or 2 sets of divs. One set of divs is going to have the left list in it and one set of divs is going to have the right list in it. And if we update and we view the page, I think you’ll see we’ve got 2 lists here but the challenge to us is top put them side by side.

Now actually, I have actually, 2 longer lists already created and created in exactly that same function or in that same method that is, this list is the left list and this list is the right list. And now, I’m going to show you how to add the custom CSS so that these 2 lists sit side by side.

Okay so anyway, let’s actually open up this page in Firefox because we’re going to use our Firefox tools to test our revisions here. So we’ll paste that URL in… okay and let’s just scroll down here, let’s inspect the element. So you can see I’ve got inside of div class format text, I have div class left list and div class right list. Those are the 2 lists we created earlier and inside those lists are the URLs and their various LI items. So that’s how that works.

And now what we’re going to do is we are going to assign a custom CSS style to this. So we go to our custom CSS and we type in…. you know, I would probably do this as .format_text and then under format_text, I would pick left list so then .left-list. And then in that, we’re going to… the first thing we’re going to do is get rid of those, the little icons here and the little bullets. So we’re going to say list style: none. Okay, list style: none format_text… maybe I need to say UL there. No, I have an error here someplace. Format text .left list UL… oh, it’s a semi-colon not a colon. There we go and I don’t need the UL either. I just… oh I guess I do need the UL for that. Okay, so we’ll say UL there.

The next thing we’re going to do is copy this and paste it and instead of UL, now we’re going to say width and let’s make that 45%, width: 45%; and then float-left and now you can see what’s happened is this has jumped up there or the 2nd list has jumped out beside the right list. And now, let’s just go ahead and copy those 2 things again and paste them. And now, let’s change that to right-list and right-list. Okay so now, we have these 2 things side by side and so, next if we want to add a background color to those because it seems to be like there was something there that you wanted. If we say background color colon and then let’s just take a very light yellow. Actually, I think I’m going to say yellow. Wait, can’t I? Maybe not okay, we’ll just say yellow. And then the same thing is true with…oh actually, I put that in the UL but I don’t want it in the UL. I just want it in the div actually. And then, we’re going to do the next one or the top one yellow.

Okay and then let’s see, in order to sort of align them nicely in the spaces, well maybe what we should do is bring it down to 40% and 40%. And then we can give the left one a margin of left margin left colon… call it 30 px.

Okay so now you’ve got a left list and a right list with a background color. You might give yourself a little bit more space on top of this and so, you might say padding top say, 15 pixels. Padding top: 15 px. Oh, I forgot my semi colon again. And then the next one needs the same thing but not the left margin. Okay and so now you’ve got a box you know, you might end up doing more padding and margin and making these smaller in order to make them you know, these things sort of even out but the concept here nevertheless is that you have a 2 unordered lists. The lists can be you know, easily styled. You can change any of the CSS associated with them. What we did was we wrapped each list in a div and then we floated, we gave both of those divs a specific width and then we floated them left and that allows the both of them to sit side by side.

Philippe asked, “Should the 2nd column be floating left as well? And why not just use tables?” Well, this is frankly… it’s quite a bit easier to use than tables and well, it sort of looks like tabular data. It’s not actually… there’s not actually a specific relationship between what would be this cell and this cell. So what you’re really doing is using tables for layout whereas if you just… I mean, if you look at the HTML for this for a second. You know, the HTML for this is so much simpler than it would have been if it was a table. You know, because all it is is a div, a UL and then list items. A div, a UL, and list items so it’s quite a bit easier to make it work that way.

And the 2nd column is actually floating left. If you come back over and look at the code that I made here, the right list is floating left and the left list is floating left. You could actually make the right list float right if you wanted to but actually, generally speaking, if I’ve got 2 columns and I want 2 columns to sit side by side, unless they’re really going to take up 100% of the width of the space that’s available to them, I always float them both left.

Okay and so, hopefully Carol, that answers your question. What I’m going to do, let’s see… Carol, raise your hand here. See if I can find the… Carol, I’m turning your microphone back on here for a second. Okay, well so anyway, that’s how to style these lists and I’m going to post this code. In fact, I’m going to cut this code right now out and I will post this code on the site later on today so that you have access to the code that I used for this.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one