First off, locate this code.
#main-wrapper {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.”
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 */
}
Now, the posting area should be correctly aligned on the right, but double check. Your finished code should look like this -
#main-wrapper {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.
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 */
}
*The drop-down menu tutorial is coming soon!! Be looking for it in the next week or so!*
5 comments:
Thank you very much Hannah!! =)
You're very welcome!! =D
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! :)
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
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. ;)
Post a Comment