I am using the 960 gs for the layout and have two columns, grid_7 each with prefix and suffix 1 (using 16 grids).
Now, I want to place two images one behind the other, in both columns.
Here's what I have so far: http://jsbin.com/ivajit/3 .. and it's edit page - http://jsbin.com/ivajit/3/edit
(in the edit page, you can close the js panel as I am not using it, so the html / render page is clear)
Now, my rays don't align exactly in center with my violin image (or is it cello? it doesn't matter)
so I add, in css
left: 20px;
and both the rays images fall to far left of browser, like so: http://jsbin.com/ivajit/2 .. and it's edit page - http://jsbin.com/ivajit/2/edit
I thought absolute positioning the ray would make it relative to it's parent so it would fall back to 20px of it's parent left.. but apparently it's not the case..
And I have tried other positions too, relative, fixed.. nothing works the way I want..
How do I put the rays behind my violin in each column please?
Positioning something absolutely will position it absolutely in relation to the page. The solution to your problem is wrap the position absolute elements in a div with position:relative.
The items position absolutely inside this element then use the position from the parent as its 0 point.