How to deal with absolute position when page scrolls?

I have a unique situation…where I have 2 items floated next to each other. Problem is…I need them to remain that way regardless of the browser width.

The left item is fixed width, the right item can be fluid with the browser.

Typically I would just set both to absolute position, the right one would have “right: 0px; left: 35px;” to deal with the fluid width and it works

But if you introduce any scrolling to the page…those items stay stuck on the page versus moving with it. How do I fix this?

Thanks

HI, I’d set a min-width on the parent of (example) 800px

The left can bve 300px. That leaves a maximum 500px width that the right can be. So just set the right floated column to have a max-width:500px. Try to keep to floating in this case :).

Thinking it over, will the parent be a fixed width or fluid? How is the parents width calculated? If it’s px in my exmaple above you can just do that.

I’m not saying AP for layout is any good. But how to fix that; It sounds like the viewport is setting the stacking context for that div. If you instead have a main wrapper with the position:relative it will be the reference and have the positioned child moved with it.

The left item is fixed width, the right item can be fluid with the browser.

Ignoring Ie6 (haslayout and the 3px jog) why can’t you do this?


.left{float:left;width:300px;}
.main{margin:0 0 0 310px}

But if you introduce any scrolling to the page…those items stay stuck on the page versus moving with it. How do I fix this?

Hmmm - confused now :slight_smile: Absolute elements won’t stay stick anyway when the page scrolls. Only position fixed elements remain stuck in position.

Perhaps we need to see an example :slight_smile: