Change sidebar from right to left on

I got it fixed by using float, but you said that it might cause some issues so I recommend you make a back-up of your style.css just in case my fix won’t work (it worked on my screen).

Go to your style.css file and find line 150. It should look like this:

#content,
#sidebar {
	padding-top: 20px;
}

Replace the previous code with this new batch of code:

#content {
    float: right;
    padding-top: 20px;
}

#sidebar {
    float: left;
    padding-top: 20px;
}

Hope this helps, let me know if it fixed it.

Ziv, thank you so much. It did help.

But now, a minor alignment issue. If you notice the site now, the sidebar appears to the left but on the right, there’s an empty linear column without any content.

Appreciate if you can share your ideas on fixing it.

Also, is there any way to change the width of the sidebar. I was using “Search” widget but it seemed so wide that I removed it. However, even after I remove it, it still is very wide. I want to narrow it down. Looking at all other posts, it looks for every theme, it’s different..

Once again, many thanks for your time and help.

-k.

To fix that empty column go to line 150 of your style.css (again I know) and delete this next batch of code:

#content,
#sidebar {
	padding-top: 20px;
}

#content {
	background: url(images/conent-sep.png) repeat-y top right;
}

Now replace it with this:

#content {
    float: right;
    padding-top: 20px;
}

#sidebar {
    background: url(images/conent-sep.png) repeat-y top right;
    float: left;
    padding-top: 20px;
}

This should fix it, let me know if you run into any problems.

And are you trying to narrow the search widget or the sidebar?

Thank you Ziv. Let me try those options.

I am trying to narrow the sidebar itself, not the widget.

Ziv, you are my saviour ?? Thank you yet again, your advice worked to remove that empty column. It looks good now.

I would appreciate if you can give something similar on narrowing the Sidebar too.

The original problem of moving Sidebar from right to left is now resolved, thanks to Ziv.

Appreciate if Ziv or someone could help with adjusting the sidebar width though ?? Meanwhile, I am trying from other posts.

Thank you all.

Go to line 150 (for the final time)

replace this code:

#content {
    float: right;
    padding-top: 20px;
}

#sidebar {
    background: url(images/conent-sep.png) repeat-y top right;
    float: left;
    padding-top: 20px;
}

with this new code:

#content {
    float: right;
    padding-top: 20px;
    width:75%;
}

#sidebar {
    overflow: hidden;
    background: url(images/conent-sep.png) repeat-y top right;
    float: left;
    padding-top: 20px;
    width: 20%;
}

Everything is now fixed. To make the sidebar bigger and the content area smaller, increase the width of the sidebar and decrease the width of the content. Make sure that when you add the width of both div tags, you never pass 95%. So for example, I used 20% and 75%. You can use 25% and 70. If you ever go over 95%, your sidebar will appear at the end of the page.