PDA

View Full Version : fixed elements on a centered layout



jschnyderite
28 Apr 2009, 02:57 PM
i want to put a shadow on each side of my centered container div using two fixed position images (for scrolling reasons). im already using a horizontally tiled background so i can't use faux columns.

the left image seems to use its containers dimensions and aligns it correctly on the left of its container

#shadow-left{
position:fixed;
top:313px;
}

but the right side aligns to the right side of the browser rather than the container

#shadow-right{
position:absolute;
top:313px;
right:0px;
}


..both images are contained in the container tag. when i try to align from the left 900px or so pixels, it uses the browser for its container as well so different resolutions will have varied results. is there a way to find the center of the browser and adjust the margin/padding?

jschnyderite
29 Apr 2009, 12:50 PM
i figured out a workaround. the left and right alignment on my fixed element would make it use the browser as its container. the left worked correctly because i didn't define left:0px;

i ended up putting the content i originally had in my container into another div and floated it left. then created a second div after the first closed and floated it right. the second div contained my right shadow. I needed to adjust margins slightly but it looks good in ie7 and firefox even when resizing browser