Two column posts with CSS
In today’s WordPress tutorial I will show you how to create a two column blog post. We will be using css. It looks well and also works great with mobile devices.
To create a two column post you can use the float option of css. We will first add some css to the beginning of the post. Create an new post and go to the text editor. We will want to use the text tab and not the Visual. Don’t be tempted to click on the visual editor as WordPress likes to delete your css code when you switch.
Add the style tag. <style></style> In the style tag we will create two containers. Note WordPress auto formats the posts; for this to work you will have to disable the auto format. You can either do this in your theme if it supports it or place every thing in a set of raw tags. It will give you raw html to work with. <raw><style></style>post text</raw>. Don’t forget to close the raw tag at the end of your page.
<style> #column2 {float:right; width:300px; heigth:auto; margin-left:auto; margin-right:auto;} Note in the css code column 1 floats left while column 2 floats right. If viewed in mobile or on a smaller screen the right column will move below the left column for a one column post. Next we will create the html needed to create the two columns. We will use the <div> tag for the columns. Create these two carrots below. <div id=”column1″></div> <div id=”column2″></div> Place your content for each column in between the div tag and it’s corresponding closing tag. <div id=”column1″>This is my text for column1</div> <div id=”column2″>This is my text for column2</div>
#column1 {float:left; width:300px; heigth:auto; margin-left:auto; margin-right:auto;}
</style>
Replace width:300px; with whatever you want so it fits nice on the page.
That is all you have to do to get two columns in a WordPress post.
You can add text images video player or any other html to each column.