Well, it's safe to say that I am stumped here. Note how the page renders very differently in regards to the fixed div in Chrome and Firefox. Firefox (and Opera, for that matter) are displaying expected behaviour. Why is Chrome giving me trouble?
I guess because you don't define a left position for #sidebar, you leave it open for interpretation. Seems like Webkit defines the left position the same as the original location of it's parent #sidebar-wrap (and not follow the new position that is controlled by it's relative move), whereas Mozilla "follows" the location of its parent.
@karlpcrowley 's solution works because it takes the position:relative out of the equation and that's where both browser types disagree.
Hey Andy, the example provided was a super simplified version just to show the browser differences. The actual site is a little more complex and requires a small set of icons to always be visible.
Any help would be greatly appreciated!
http://dabblet.com/gist/2009339
Is this right? http://dabblet.com/gist/2009425
http://dabblet.com/gist/2009433
http://dabblet.com/gist/2009473
The code might not be complete, but you should get the idea!
@karlpcrowley 's solution works because it takes the position:relative out of the equation and that's where both browser types disagree.
I think :)
Have you considered using floats instead for your columns & layout? It may make it much easier moving forward.