Create A 2-Column WordPress Page
I have a WordPress Page called Archives that contains 2 columns. How did I do it? It’s simple. First of all, let me clarify what I meant by a WordPress Page. A WordPress Page is technically a post that lives outside the blog chronology. Examples of WordPress Pages are: About, Contact, Archives, Links, etc. So, how did I get a WordPress Page to display in 2 columns? Well, simple. I’ll teach you how.
You’ll need a little bit of HTML and CSS code to make it work.
1. HTML Code: Use this HTML format in your WordPress Pages.
2. CSS Code: Add this CSS code to your WordPress Theme’s stylesheet.
3. That’s it. It’s that simple. Enjoy your 2 Column WordPress Page.
(3 votes, average: 5 out of 5)
Loading ...
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.