Title: Create a floating sidebar Last modified: August 19, 2016 --- # Create a floating sidebar * [kneeki](https://wordpress.org/support/users/kneeki/) * (@kneeki) * [17 years, 11 months ago](https://wordpress.org/support/topic/create-a-floating-sidebar/) * Hi all! I’ve been wanting to get a floating sidebar @ my block ([http://www.geekbocks.com](http://www.geekbocks.com)) for quite a while now, and so far I’ve had no luck getting it to work. I’ve tried many things, but I just don’t think I have the experience to tackle this type of thing. Currently, my side bar (which is not widget friendly) looks like this: * [http://www.geekbocks.com/temp/mysidebarnow.jpg](http://www.geekbocks.com/temp/mysidebarnow.jpg) * Now, I can easily make it widget friendly of course, but it would still be at the bottom of the page. Which, I find quite annoying. I would like a sidebar here: * [http://www.geekbocks.com/temp/whatiwouldlike.jpg](http://www.geekbocks.com/temp/whatiwouldlike.jpg) * Like I said, I’ve invested quite a few hours into researching this problem, but I’ve come up with no positive results. I usually do all of my blog theme editing @ [http://www.geekbocks.com/probablybroke](http://www.geekbocks.com/probablybroke) if you’re wondering what I’ve come up with so far …. It’s not pretty. Any tips about how this can be done, or a link to a theme which is already doing it so I can take a peek at the code would be wonderful! * Please let me know if you need any more information. Thanks! Viewing 5 replies - 1 through 5 (of 5 total) * [csleh](https://wordpress.org/support/users/csleh/) * (@csleh) * [17 years, 11 months ago](https://wordpress.org/support/topic/create-a-floating-sidebar/#post-782404) * I think you’ll want to absolutely position the sidebar box to the top and right of your main background area. That main background area will need to have position: relative set in order for the other bit to be placed where you want. something like: * ``` #mainbackground {position:relative; width:800px;} #sidebarcontainer{position:absolute; top: 50px; left:820px; width:200px;} ``` * This would move it 20px to the right of the mainbackground div. * [Cathy Mitchell](https://wordpress.org/support/users/multitalentedmommy/) * (@multitalentedmommy) * [17 years, 11 months ago](https://wordpress.org/support/topic/create-a-floating-sidebar/#post-782405) * I wasn’t going to suggest a positioning solution, but you can try that first it would be easiest. * But I think that what you are looking for isn’t simple. It would require setting the width of your background/wrap/page to be wider. And then fixing your main content column to keep it’s current width. (how you do that depends on the nested div’s in your theme and whether it is floating or fixed. And then getting the sidebar to float to the right of your new background width. Or float left with a left-margin depending on how the other boxes on your page are set up. * This is because you’ll want to keep the sidebar OUT of your content div so that it can take up 100% of the height of your blog. If not, then your main content column will wrap under the sidebar. * Position is very important and the basis of a strong theme. You DO want a good theme because we are not just working with html here – this is dynamic content and it has a way of breaking your styles! * hope that gives you a direction to go in. * [csleh](https://wordpress.org/support/users/csleh/) * (@csleh) * [17 years, 11 months ago](https://wordpress.org/support/topic/create-a-floating-sidebar/#post-782409) * You could do floats (it’s probably what I would do). Then you have to make sure to clear them so everything looks ok. I tried with positioning and I’m liking how the sidebar is now totally independent of the content. Every width does need to specified, either as px, em or %. Here’s what I mocked up to test positioning: * ```

content area

text goes here without affecting sidebar area

 

 

sidebar goes here

``` * The wrapper is only there to keep the whole bit centered in the browser window. If you don’t need centering, take it out. * There are many other ways to approach this though. Gotta love css. * [Cathy Mitchell](https://wordpress.org/support/users/multitalentedmommy/) * (@multitalentedmommy) * [17 years, 11 months ago](https://wordpress.org/support/topic/create-a-floating-sidebar/#post-782419) * csleh, I would love to get that figured out, how to get things to be independent of each other. But every time I try to position things I get IE problems. usually lots of them! * [csleh](https://wordpress.org/support/users/csleh/) * (@csleh) * [17 years, 11 months ago](https://wordpress.org/support/topic/create-a-floating-sidebar/#post-782431) * If the above doesn’t work in ie, it’s likely a known browser issue. Position is everything is usually very helpful in fixing these: * [http://www.positioniseverything.net/explorer.html](http://www.positioniseverything.net/explorer.html) * I’m using firefox on a mac so can’t duplicate to point you in a different direction. sorry Viewing 5 replies - 1 through 5 (of 5 total) The topic ‘Create a floating sidebar’ is closed to new replies. * 5 replies * 3 participants * Last reply from: [csleh](https://wordpress.org/support/users/csleh/) * Last activity: [17 years, 11 months ago](https://wordpress.org/support/topic/create-a-floating-sidebar/#post-782431) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics