Hey, I'm doing the layout for npt-tv.net, a student NGO doing news coverage on the state of nuclear disarmament.

I'm having troubles positioning the arrows left and right from the mosaic-style thumbnail images on the index site.

The attached photo illustrates how it should look ideally. alt text

The left one works out fine, but the right one is at the moment positioned using absolute positioning:

position:absolute; left: 1100px;

needless to say, this is less than ideal and causes the arrow to stay at a fixed position, no matter how big the client window. I've tried a host of approaches using relative positioning, container divs and floats, but it doesn't work no matter what.

I realize this is a demanding question, but could someone with more CSS chops point me in the right direction? We're putting up new videos by the day, and I'm really desperate to get this fixed!

Thanks so much,


3 answers


I think you need to understand relative; and absolute; a little better and you'll be able to keep both arrows in place. The best tutorial (less than 5 minutes of reading) I've used is Learn CSS Positioning in 10 Steps. After this you should be able to make the arrows literally relative to the centered div.

Answered almost 7 years ago by Sean Maher

Use relative positioning and stop putting all your styles in your markup.

Answered almost 7 years ago by Nathan Duran

Try this:

.coda-nav-right { float:right; position:relative; left:70px; top:-210px; width:50px; }

Answered almost 7 years ago by TailorDMI