Question

I am working on creating a fixed sliding sidebar for a WordPress theme so I have to create a fixed positioned sidebar from this tutorial.

The present property of the outer division is relative. When I tried to change that to fixed it is changing the location of the sidebar. So I tried to create one more division just after the following division:

<div id="sidebar1" class="sidebar fourcol last clearfix" role="complementary">

with id sidebar-wrapper.

When I created the css property for sidebar-wrapper as position:fixed; it actually works but I see that its width is 489 pixels which is exceeding its outer div width 359 pixels. Since the outer div width is dynamic I can’t create width attribute for inner div.

Please find the code snippet here.

The problem is because the fixed position div is trying to use all the available space of the browser instead of inheriting the parent div’s width. When I tried declaring inherit it is changing to 419 pixels, I am confused how did it get that pixel count.

Any Help Appreciated.

Answer 1

I have used jQuery to calculate the width of the the sidebar and defined css property width of the fixed division dynamically using jQuery and it solved my problem.