WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Positioning problem

Reply
  Thread Tools Display Modes
Old 1st January 18, 10:46 PM   #1
swegnson
WLC Member
 
Join Date: Jan 2018
Location: New York
Posts: 1
Default Positioning problem

Hello. I am a part-time webmaster for a non-profit with beginner skills. I could use help with the following. I am creating a banner headline that has 3 elements, an image, a block of text, and another image. In my style sheet 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 frankly don't understand where the right boundary is precisely or how to justify to it. With an attribute of "right: 0px" the 3rd element falls outside the header. The right 150 brings the image within the header container desktop and it all works great 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, well left of the header's right boundary. Before I tried to add the 3rd element the header sized perfectly well on the ipad or phone.

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.
swegnson is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:25 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.