Hello. I am a part-time webmaster for a non-profit with beginner to maybe intermediate skills. I could use help with the following. I am creating a banner headline that has 3 elements, an image, a block of 4 lines of text, and another image. In my style sheet the the header container, within which all 3 should fit, has among other attributes
width: 960px;
margin-right: auto;
margin-left: auto;
My issue has to do with making the header work on different devices. My desktop (Windows 7) has a screensize of 1280 x 1024. I have no issues with the first two elements, but to have the 3rd element (2nd image) fit on the same level as the first two elements and within the header container I set the class for the 3rd element to have
position:absolute;
top:0;
right: 150px;
I arrived at the 150 by trial and error because I can’t seem to get my head around all the dimensions correctly. But the right 150 brings the image within the header container and it all works great on my desktop with Chrome, Firefox and IE 11. However if I then look at the header on my iPad or a phone the 3rd element image has shifted too far to the left.
Surely there is a way to have the 3rd image placed so that it is right adjusted to the right boundary of the header container so it is seen there on any device?
Here is the web site in question ==> http://www.usps.org/norwalk/
Thanks in advance for any help.
