Blogging Tip: How to create a sidebar

I have been asked how I created a sidebar in an article.

Not too hard, is it?Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer vestibulum sem nec augue. Vivamus suscipit, nisi non porttitor imperdiet, lorem mauris accumsan mi, et tincidunt est mi eu augue. Curabitur vehicula justo ac eros. Nulla sed justo. Pellentesque pede lacus, tincidunt non, gravida nec, volutpat sit amet, turpis. Duis condimentum nulla sit amet odio tempus porttitor. Fusce non nisl. Quisque in augue vitae turpis nonummy cursus. Cras lectus est, mattis scelerisque, luctus eu, lacinia nec, libero. Nullam risus. Nullam convallis nunc non quam.

It is really rather simple. I used the <table> html element like this.

<table width=”40%” align=”right”><tr><td>
<strong>Not too hard, is it?</strong>

<small>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer vestibulum sem nec augue. Vivamus suscipit, nisi non porttitor imperdiet, lorem mauris accumsan mi, et tincidunt est mi eu augue. Curabitur vehicula justo ac eros. Nulla sed justo. Pellentesque pede lacus, tincidunt non, gravida nec, volutpat sit amet, turpis. Duis condimentum nulla sit amet odio tempus porttitor. Fusce non nisl. Quisque in augue vitae turpis nonummy cursus. Cras lectus est, mattis scelerisque, luctus eu, lacinia nec, libero. Nullam risus. Nullam convallis nunc non quam.</small>
</td></tr></table>

Why would a blogger want to create a sidebar?

The main purpose of a sidebar is to allow you to include tangents that are related to the main body of an article but do not fit into the flow of the argument. They are leftovers, scraps that would either have to be cut and thrown into the bitbucket or made into their own post. They might include your cleverest writing. It’s a shame to lose those little scraps. Keep them and put them in a sidebar.

Technorati Tags: , ,

Advertisements

3 responses to “Blogging Tip: How to create a sidebar

  1. Nice bit of tutoring. What’s the significance of the and commands?

  2. Heh, sorry. What’s the significance of the “tr” and “td” commands.

  3. Both TR and TD are valid in the context of a TABLE.

    <tr> encloses a table row.

    <td> encloses a table data cell.

    The magic that makes the example work as a sidebar is in the WIDTH and ALIGN attributes that narrow the table and shove it against the container’s right margin.