1.) Go to Design--> Template Designer--> Advanced--> Add CSS--> Input code below
.post-column-left {
float: left;
width: 45%;
}
.post-column-right {
margin-top: -5px;
float: right;
width: 45%;
}
float: left;
width: 45%;
}
.post-column-right {
margin-top: -5px;
float: right;
width: 45%;
}
2.) Now that my styles are in place I just need to add a few lines of HTML into the post I wish to split. When you go to the Post Editor make sure you are in Edit HTML mode when you apply this code below.
<div class="post-column-left">
<--Content To Display on Left Side of Post-->
</div>
<div class="post-column-right">
<--Content To Display on Right Side of Post-->
</div>
3.) Fill in the Blue with the text or content you wish to display.<--Content To Display on Left Side of Post-->
</div>
<div class="post-column-right">
<--Content To Display on Right Side of Post-->
</div>
Inside the Post Editor you will not see any changes, but once you view the content on you blog it will then show up side by side.
7 comments:
I guess you can use just 45% instead of pixels and than there is no need to know the width of the post area and 20px gap you can specify with padding property.
Anyway this was helpful.cheers.
LOL Why did I not think about that >_<
Hi. This is really useful but I have a problem. When I add to my columns I get a few paragraphs down and then (after copying the HTML for safety) I publish and the post vanishes. I then have to copy and paste in the pre-copied HTML, delete the last paragraph I added and re-post. It is then back again. Unfortunately it seems I cannot have a post that is very long down the page?
Perfect! Worked like a dream - took me about an hour of googling to find this lol
Thanks heaps x
Oh look,I wrote on the wrong post lol I came back to say thanks, was meant to be on the 'Split Gadgets'post :)
this was exactly what i needed; thanks!
Thank you so much! I didn't expect to be that simple.
Post a Comment
Please don't post hyperlinked text within the comment box! It will not be published and you will be marked as spam.