How to move the Basic Reader sidebar

A few days ago I got an e-mail asking how to modify the Basic Reader template to move the sidebar to the left side. For a design as simple as Basic reader it is a pretty simple change to do. Here is a step-by-step guide:

The starting point

The two content areas in the template design are the div:s called “content” and “sidebar”. In the original version of the template, the CSS for the two ID:s look like this:

#content {text-align:left; width:700px;}
#sidebar {float:right; line-height:1.4em; width:200px;}

In the HTML code (index.html), the sidebar div comes first, followed by the content div. Both div:s have a defined width, and #sidebar has a float that moves the div to the right while leaving space for the content div to go to the left.

Changing the HTML code order and moving the float

One way of switching the positions of the div:s in a really easy way is to change the order for the div:s in the HTML code. Using a code editor, select all the code for the div with id=”sidebar” and move it so that it appears after the ending </div> of the div with id=”content”. Then move “float:right;” from #sidebar to #content in the CSS and save both files. The CSS should now look like this:

#content {float:right; text-align:left; width:700px;}
#sidebar {line-height:1.4em; width:200px;}

…and that is it. The result should look like this: (click the screenshot to download a version of Basic Reader that has been modified as described in this post)

basic reader, templates, tutorials