Jan 10, 2011

Two columns



divs

This method is achieved by putting this code in your blog template anywhere between the <head> tags:



And putting entering this in a post, using the Edit HTML tab:
<div class="leftcolumn">

MAIN CONTENT

</div>
<div class="rightcolumn">

SIDE CONTENT

</div>
<div style="clear:both;"></div>

The widths are defined as a percentage, and so should scale well, but you can edit the CSS code (the first block that goes into your template) to adjust the percentages, or change it to pixels if you wish.


sidebar filler text:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend vehicula ultricies. Nulla aliquet, turpis ut dictum laoreet, orci enim feugiat nisi, id tempus velit est eget eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed lacus sem, tempor placerat rhoncus nec, lacini



With CSS is is much easier to change the style/appearance of the columns. For example, by modifying the CSS code you can add a border:With CSS is is much easier to change the style/appearance of the columns. For example, by modifying the CSS code you can add a border:

<style>
.leftcolumn {
float:left;
width:70%;
border:1px solid black;
}
.rightcolumn{
float:right;
width:25%;
border:1px solid black;
}
</style>
sidebar filler:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend vehicula ultricies. Nulla aliquet, turpis ut dictum laoreet, orci enim feugiat nisi, id tempus velit est eget eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed lacus sem, tempor placerat rhoncus nec, lacinia vitae eros. Nam pharetra elementum congue. Donec tincidunt pellentesque justo ac dictum.


Tables



You may prefer this one because it doesn't involve adding anything to the blog's template and allows you to define different column sizes for each post.

In Edit HTML mode in a post:


MAIN CONTENT



SIDE CONTENT


You can cange the width of the side bar by changing the walue in "td width="200px"'

sidebar filler:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend vehicula ultricies. Nulla aliquet, turpis ut dictum laoreet, orci enim feugiat nisi, id tempus velit est eget eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed lacus sem, tempor placerat rhoncus nec, lacini

No comments:

Post a Comment