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:48%;
float:left;
padding:0 0 0 10px;
margin:0 0 20px 0;
}
3. That’s it!
Sample
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!
This is my first post
just saying HI
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?
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.
Nice tip, thanks.
i should update this post since my archive page now shows a single column.
Ulysses you are a star.
I’ve been struggling with this issue and continually breaking my site and you solved it in seconds..
This worked wonderfully for my website! Thanks so much for sharing it!
Debbie
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!
whats the point of this? really…
Nice, kid. But how are you going to fill two columns with posts?
with text.
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
Dana, you’re welcome. The `Sharing is Sexy` bookmark is a plugin called Sexy Bookmarks.
Oh yeah. It works. I have spent around 4 hours looking for this.
Thank you. CSS rules.
oh yea, i love this code. i use it in several sites when i can.
Can I ask an unrelated question?
I’m using a theme that is supposed to lay out post excerpts into two columns, like here – http://www.upstartblogger.com/wpthemes/index.php?wptheme=ub_swiss
But mine are all in one – http://vgtees.cn/category/uncategorized/
I haven’t changed anything, could you give me a hint why this could be?
Sorry if it’s not appropriate to ask or post links here.
I’m not sure what you mean?
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?
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.
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.
Worked like a charm! Thanks man!
Great! I’m glad it did.
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!
I want to create two columns on just a few of my pages.
I added to the CSS code in the stylesheet.
Then I tried adding the div class code right into the page I wanted using the HTML editor, but it didn’t pick up the coding:
http://www.facultylinc.com/idea-center/
Thanks.
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.
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
I’m glad it worked for you. Just be careful when editing using in Visual mode. It suppresses HTML tags.
Thanks for the column code! Looked all over the wordpress site and could not find this. Worked perfectly!
I’m glad that worked out.
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
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.
HTML
CSS
.one { background-color:#900;}Appreciate the code, worked perfectly.