Question

I am trying to create a HTML page slider, so I have my container div, then sitting on the outside, on the left I have a Previous Icon and on the right I have a Next icon.

My problem is, when I resize the window to smaller screens the icons move into the center of my container, I want them to stay position fixed to the outside of the container at all times when resized.

My container code: –

width: 960px;
margin: 0 auto;
clear: both;
overflow: hidden;
min-height: 449px;

Next and previous code:

a.vehicleSliderLeft {background: url('../img/slider_arrow_left.png'); 
             width: 55px; height: 112px; left: 270px; background-position:0px; 
             background-repeat: no-repeat; position: fixed; top: 420px;}    

a.vehicleSliderRight {background: url('../img/slider_arrow_right.png'); 
             width: 55px; height: 112px; right: 270px; background-position:0px; 
             background-repeat: no-repeat; position: fixed; top: 420px;}

Any ideas? cheers

Answer 1

You need to give the main container position: relative and then position the arrow elements inside the container with position: absolute.

This then allows you to manipulate where you put both arrows on the page using right: x , left: x , top: x , bottom: x. where x is any number or percentage.

jsFiddle: http://jsfiddle.net/LZG3R/3/

Source: Learn CSS Position in Ten Steps