Create A 2-Column WordPress Page

How do you create a 2 Column WordPress Page? It’s simple. First, let’s explain a WordPress Page. A WordPress Page is technically a post that lives outside the blog chronology. Examples of Pages are the About, Contact, Archives and Link pages. All you need is a little bit of HTML and CSS code to create a 2 Column Page. Here’s how!

1. Format your WordPress Pages using the following HTML code

<div class='embed'>
Left Column Text
</div>
<div class='embed'>
Right Column Text
</div>
<div style='clear:both;'></div>

2. Add this CSS code to your theme’s stylesheet.

.embed {
  width:47%;
  float:left;
  padding:0 0 0 10px;
  margin:0 0 20px 0;
}

3. That’s it!

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida ornare vulputate. Fusce pulvinar placerat nulla, quis congue ligula malesuada in.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida ornare vulputate. Fusce pulvinar placerat nulla, quis congue ligula malesuada in.

How About Multiple Columns

No problem. The code is very flexible. You can easily create multiple column pages by slightly modifying both HTML and CSS codes.

1. HTML: Add a 3rd or 4th “embed” class.
2. CSS: for 3 columns, use width of 31px; for 4 columns, use 22px.

Caveat

The WordPress Visual editor removes HTML tags like “div” tags. If you want a 2-column WordPress page, use and save your work using the HTML editor instead. It’s easy to switch to Visual and HTML and vice versa.

That’s it! Enjoy your 2 Column or Multiple Column Pages!

62 thoughts on “Create A 2-Column WordPress Page

  1. I’ve tried to implement this in WP 2.3.3 and, while it works the first time I insert the code into a page, if I try to edit it later, the div tags are changed to p class tags and the p class tags don’t make the 2 columns work.

    Suggestions?

  2. Eric,

    I noticed the same. It has to do with the way the WordPress visual editor renders the div tags. WordPress uses TinyMCE as its editor. TinyMCE is configured to substitute divs to p tags. I don’t know why this is. I work mostly with the visual editor turned off so I didn’t notice the problem. Interestingly enough, there is a post here discussing this same problem with a nice solution at the bottom. It seems too much trouble for me to edit TinyMCE config file. I usually just cut and paste the code into WordPress everytime I want to make a change to avoid editing.

  3. If you want to read a reader’s feedback :) , I rate this post for 4/5. Decent info, but I have to go to that damn google to find the missed bits. Thank you, anyway!

  4. Thanks for the info on columns. I will soon be creating a blog for my husband and he specifically requested columns. I can’t wait to try your code.

    While on your site, I noticed your “Sharing is Sexy” bookmark. What is that called. I love it and would like to add it to my clients blogs!

    Thanks,
    D

  5. Well, here are the screenshots:
    Two columns layout working fine – http://i28.tinypic.com/11ryp8m.jpg
    My webpage with only one column showing up – http://i25.tinypic.com/2n8v2up.jpg

    You can see that my “Test 3″ and “Test 1″ posts are all in one column, though one should really be on the left, and the other on the right side of the page.
    I’m using WordPress theme from the first screenshot, but it doesn’t format the posts like in the first picture.

    Hope this is a bit more clear description.
    I haven’t changed the theme files at all. Do you have an idea where to look to fix this?

    1. The only thing I can think of is you lost formatting on your page? This happens when you use ‘Visual’ instead of ‘HTML.’ Check the HTML source again to see if WordPress editor mess it up.

      1. I got it, the theme display posts in 2 columns only on a homepage (i.e index.php). It puts everything in one column on other pages, like Categories, for example. I will try to find the difference in them first.

        By the way, I just used your 2 column layout in a post again. So pretty.

  6. I have two columns of embed class that are different in height.
    The second column is shorter. Now, when I put text after these columns, after , it still starts in the second column:

    Column 1 Column2
    some text some text
    some text some text
    some text some text
    some text New paragraph starts here!
    some text and continues here
    and then here. Though it should start on this line.

    I tried naive things like br / and p /p, it didn’t work, of course.
    How can I fix this?

    Thanks!

    1. Steve, It’s probably the WordPress editor. You have to switch to HTML instead of Visual because the Visual editor behaves kind of funky. It drops a few HTML codes like the ‘embed’ divs.

  7. This code fixed my problem of laying out text in 2 columns… it was quick and easy.

    I’m using the Thesis WordPress theme and the CSS was quickly added to my custom styling

    Thanks

    David

  8. Thanks for the column code! Looked all over the wordpress site and could not find this. Worked perfectly!

  9. I love this simple solution.
    Any thoughts on how to make one of the columns a different color,..my normal (limited) html tricks do not seem to work here.

    Thanks again for the heads up.

    Gregory

    1. Gregory, just create another div class inside one of the embed divs and style it accordingly. I haven’t tested it, but this is the basic concept.

  10. I was looking for exactly this! Thank you. But, I’ve tried it, just as described, and no dice…the left and right-hand texts line up vertically. Surely I’m missing something simple…
    here’s where I tried it : http://miniboom.net/marypanzer/

    thank you for any help…!

    1. Jon, a couple of things. Use ” instead of the slanted quotes. Also, you need to add in style.css the css for embed classes.

    2. I just realized WordPress translates quotes as slanted quotes when you type inside a post or comment. Make sure you use HTML instead in your editor.

      1. Thank you for this. I put the .embed class in the style.css (after #content), and cp/pasted the html into the post itself using the html editor…no dice yet. Will keep trying, though. This is a great solution for what i’m trying to do (mockup at : http://www.miniboom.net/Cotocon/mockup/index_mockup.html , where the 3 columns in the middle are what I’m trying for…)

  11. Have tried this but failing to create two columns on a specific page – my home page.
    Can you elaborate on where the code should go for the css code – i added it to the end = is this the right place?
    Thanks

    1. Bill, I think it’s possible to have uneven columns. The ‘clear both’ code you see at the end is just making sure your the text that follows is below the longest column.

  12. I used your code on WP version 3.0.1 and it doesn’t work. I edited the stylesheet and the text. When I preview the page it all comes out in one single column. Any ideas?

  13. Hi,
    I used your code on WP version 3.0.1 and it doesn’t work. I edited the stylesheet and the text. When I preview the page it all comes out in one single column. Any ideas?

  14. Hi,

    Not working on my theme either. It happens as Alex, the two columns are left align one after the other.

    I also included the CSS script and the intructions followed also a late WP 3.0.2 version used. ¿Any incompatibility with the theme I use?

    Regards

  15. I just updated this post just a few minutes ago. I’m currently running the latest version of WordPress, version 3.1. This tells me that this code works. Please check your code. Make sure you are using quotes instead of slanted quotes that WordPress inserts inside its posts. The big issue people are having is using the Visual editor instead of HTML editor. If you save your post in Visual mode, the div tags will be deleted, and your columns will not render on the screen. Use the HTML editor.

  16. Unfortunately this isn’t working for me either with WordPress 3.1 . I updated the .css sheet of my theme and tested the feature in a post to no effect. (I am using the HTML editor and not the Visual editor, of course.)

  17. I tried this code and it didn’t work for me. I am trying to make my Contact page 2 columns. I updated the page in HTML and also the style sheet and the content is staying all in one column. Maybe I’m not inserting the CSS in the right place on the style sheet? I put in after #content. Any suggestions on how to make this work?

  18. There are 3 things that could go wrong when trying to implement a 2 column page. First, you must use the HTML editor instead of the Visual editor. Second, WordPress converts the quotes as slanted quotes. Use single quotes instead. Third, people often forget to add the CSS needed to display the columns.

  19. You can add border-right to the embed class, but that would display right borders to both left and right columns. If you want to add a border just to the left column only, you will need to add a second class to each divs. Something like class=”embed left” and class=”embed right” would work. You can style .left to have a border-right:1px solid #ccc for example.

  20. Emily,

    Thanks for posting your link. It helps out a lot. Your code looks good. The embed divs are there. You added it correctly. The problem is your CSS. It’s not working. It took me a minute or two to realize, you have it commented out. This is your code.

    /* Extras emily added
    .embed {
    width:48%;
    float:left;
    padding:0 0 0 10px;
    margin:0 0 20px 0;
    }

    /* ======================== */

    Everything is commented out between /* and the next */

    You need to do this:

    /* Extras emily added */
    .embed {
    width:48%;
    float:left;
    padding:0 0 0 10px;
    margin:0 0 20px 0;
    }

  21. I tried this code and it didn’t work for me. I am trying to make my Contact page 2 columns. I updated the page in HTML and also the style sheet and the content is staying all in one column. Maybe I’m not inserting the CSS in the right place on the style sheet? I put in after #content. Any suggestions on how to make this work?

    1. You can add “border-left:1px solid #ccc” to css. However, this will add left borders on both columns. Another option is to add a second class to the right column and add css to it.

Comments are closed.