Move Sidebar from left to right

[TheJoe]

I have been searching for this and I know it has to be a fairly simple fix. I have not been able to figure it out.

I would like to swap the sidebar from the left side to the right side. I am not fully css savvy. I am testing this theme to replace my blog's theme. (I love the header)

So, this is what I have tried:

In style.css:

#content {
float: right; <---- I change this to none
width: 640px;
margin-top: 0px;
}

and:

#sidebar {
width: 232px;
float: none; <--- I change this to right
padding-top: 8px;
text-align: left;
}

This does move the content area to the left side and positioned correctly. However, the sidebar is on the right side and is below the content area. I hope this describes what I am seeing properly. I have not rolled this theme out to my blog yet, it's just behavior I am noticing on my dev system.

This seems like it's an easy fix, I have not worked with CSS for some time. Could any one give me some help or point me in the right direction?

Thank you in advance.

[wayne]

Try editing the index.php file and swap the order of the sidebar and the body.

[TheJoe]

That was one of the first things I tried.

The index.php file calls the following:

header via: <?php get_header(); ?>
Then does the "content" via: <div id="content">

Then calls the sidebar and the footer:

<?php get_sidebar(); ?>

<?php get_footer(); ?>

All the layout information for the body of the content is in CSS. I've been using CSS Edit and it looks great in preview mode. When it goes to my dev site and I bring it up in Firefox or Safari, the sidebar is on the right side but it's below the "content" area.

It's all good, I am working on integrating the phatfusion/mootools code into the original wp theme.

Thanks for your response.

-Joe

[TheJoe]

I brushed up on my CSS and with the help of CSS Edit, I found the solution.

For those that are interested in doing this within the current "slidingdoor" theme.

In style.css:

Find:

#content {
float: right; <---- change this to left
width: 640px;
margin-top: 0px;
}

and:

#sidebar {
width: 232px;
float: none; <--- change this to right
padding-top: 8px;
text-align: left;
}

This will swap the sidebar to the right side of the page. The mistake I made was changing float to none, which made the 'content' block take up the whole page within the wrapper.

I hope this helps.

[wayne]

yep good work

[Margriet]

Thanks!!!!

For your clear explanation. It works fine for me also!

[StacyN]

Oh - this is terrific! Great info and it worked perfectly. I didn't even know where to start with it - and I'm pretty OK with CSS. There's just a lot of lines to wade through.

[LLC]

It doesn't seem to work for mine when I make those changes. www.linechasingcircle.com

[brookek1]

Cheers, that worked great

[amykf]

Thank you, thank you, thank you! Those instructions worked perfectly.