Question

I have a div whose position has been fixed. Everything is fine till the window is re-sized. On re-size, when we scroll to the rightmost part of the webpage, the fixed div still remains at the left-most end of screen. I wish it to scroll left along with the window, but not scroll down along with the window.

If I am unclear in expressing my doubt. You can have a live demo here.

Search for any product say Apple Ipod Touch there. Once the results are displayed , resize window and scroll to rightmost part .

Can anyone suggest some CSS or Javascript to resolve the same.

Thanks !

Answer 1

I would restructure your layout and remove position fixed. For example something like this. Obviously this isn’t exactly like your code. But the concept is the same. If you have your div with the control inside of the same container as the results and the history, it should then move with it.

#wrapper {
width:960px;
margin:0 auto 0 auto;
}

#left-col,
#right-col {
width:100px;
float:left;
}

#mid-col {
width:710px;
float:left;
}

<!-- holds your column containers -->
<div id="wrapper">

<!-- your control -->
<div id="left-col"> 
</div>

<!-- your search results -->
<div id="mid-col"> 
</div>

<!-- your history -->
<div id="right-col"> 
</div>

</div>