How to Move Your Sidebar

Marieanne wanted to know how to move her sidebar to the left of her posting area – and I thought it was a great question! This is very simple and easy to do.
First off, locate this code.
#main-wrapper {
width: 820px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding-left: 20px;
padding-right: 20px;
background: #ffffff;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 200px;
padding-right: 15px;
padding-left: 15px;
padding-top: 10px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
Yours might look a bit different – that’s okay. This is the code for the sidebar and posting area. Right now the sidebar is on the right, and we’re going to move it to the left. All you have to do is find “float:right;” under “#sidebar-wrapper” and change the “right” to “left.”
Now, the posting area should be correctly aligned on the right, but double check. Your finished code should look like this -
#main-wrapper {
width: 820px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding-left: 20px;
padding-right: 20px;
background: #ffffff;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 200px;
padding-right: 15px;
padding-left: 15px;
padding-top: 10px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
That’s it! Very simple and easy to do! If you have any questions or problems, though, don’t hesitate to comment and let me know.
*The drop-down menu tutorial is coming soon!! Be looking for it in the next week or so!*

5 comments:

Marieanne said...

Thank you very much Hannah!! =)

Hannah Rose Beasley said...

You're very welcome!! =D

Bella Skye said...

Great tutorial! I was trying to figure out how to move the sidebar to the right and this tutorial helped, even though it was the opposite! Thanks Hannah :) Can't wait to see the drop down menu tutorial! :)

Unknown said...

I have just one question. :)
When I moved my sidebar to the left, my blog acquired some extra space to the right now. All I think I really did was what you instructed.

I've been wondering what I've done wrong with the HTML. I'm not a pro when it comes to HTML, but I do understand the most part. Do you have any idea what I could be doing wrong while moving my sidebar?

Thank you so much. :)

-Hannah

Hannah Rose Beasley said...

Could you give me your blog's url, Hannah? I'll check out the code you have and try to see what's going on.

Well, let me tell you - html is tricky for everyone! =D Sometimes I'll write something and nothing will work - I'll try for such a long time, and then I'll discover I misspelled a word or something like that! =D So yup...it's a bit ornery. ;)