• Announcements

    • boen_robot

      Guidelines and Netiquette   03/28/2017

      Posting Problems:   Having problems posting your topic? Read through this: To join, you agree to our terms and conditions and fill out and submit a registration form. An activation email will be sent to your email adress, so you'll need to verify your account. After that the account has to be validated by one of the moderators. This will mean that it can take up to a day to be activated. A couple of things to remember to ensure approval: Don't use an email address in one of those $2 four character .com domains eg. xyds.com. These will be deleted and the domain added to the banned list. Don't use an email address that is within a domain with a bad reputation for spam. A Google search is run on every email address and email domain. Don't sign up with an email address that doesn't exist, doesn't work or requires the sender to answer a quiz before their email can get to you. Put your country and or state and city in the signup form. Blank forms will go to the botton of the "to do" list. And make sure that your email address and your country match, saying you're from Alabama and using a .ru email address is not going to get you activated. After a membership is activated the first few posts will be monitored. Posting spam or unapproved topics described in the agreement results in an immediate ban. The email provider and the IP addresses associated with the account will be banned and all posts will be deleted. These strict measures have been deemed necessary to hinder spam. Sorry for any inconvenience this causes, but it's not liable to change. If, after reading this, you still can't post and don't understand why, contact one of the Moderators listed here.   Topic Guidelines   Including the following information can expedite an accurate response from board members: Must be a Specific Problem or Question related to web design and development Include Code in Question (wrap with   for small blocks of code and for longer blocks   ) Include Code Author Include Extra Notes/Modifications/Attempts Include web link to page/file when possible Content Guidelines   You may not post, upload, link to, or email any Content that contains, promotes, gives instruction about, or provides prohibited Content. Prohibited Content includes any Content that breaks any local, state, county, national or international law. Prohibited Content also includes: No direct or indirect advertising or websites, forums, products, services No hijacking of posts (do not post your question in someone elses) Content that infringes upon any rights [ex. MP3s and ROMs] (including, but not limited to, copyrights and trademarks) Abusive, threatening, defamatory, racist, or obscene Viruses or any other harmful computer software False Information or libel Spam, chain letters, or Pyramid schemes Gambling or Illicit drugs Terrorism Hacking or cheating for internet/online games Warez, Roms, CD-Keys, Cracks, Passwords, or Serial Numbers Pornography, nudity, or sexual material of any kind Excessive profanity Invasive of privacy or impersonation of any person/entity Hacking materials or information Posting Tips   There are more BBcodes than there are buttons for on the reply menu. To get the full list, click "BB Code Help" underneath the clickable smilie face menu. Use   for small snippets of code Use   for lengthy snippets of code Use   if your snippet is HTML (optional) Use   if your snippet is SQL (optional) Rules of Conduct   Be nice. There's no need for calling someone stupid if they ask an 'easy' question. Keep your avatars and signatures absolutely child friendly. We have a younger audience on this forum. Keep your language appropriate for the same reason above. Do not PM moderators for help on the forum. Post on the topic, or create a new one.   Spam:   Recently, as you have all without doubt noticed, we have had lots of spam and advertisement on the forum. Therefore, we'd like to alert you as to what to do when you have found any of the aforementioned annoying messages: it. Immediately. Give a clear reason, please, if the advertising is not evident. DO NOT POST! Report, let the post stay as is, and we will get to it, meanwhile if you continue to post as normal in the other threads, it won't be on the top so long. Refrain from PMing the member. This won't help at all, as they are most likely spambots anyway. Thank you.       Images in signatures:   After thinking of users on dial-up, we have decided to enforce the following rules regarding signatures. Please pay heed to them. Respecting these rules is respecting the members on this forum with dial-up. Signature rules: No animated images AT ALL. No matter the amount of animation. Maximum image widthxheight: 300x150 Maximum image (file) size: 15kb Use calm colors. Do not use highly contrasting images in your signature, as this can get really annoying when seeing several posts from one member in the same thread. The same prohibited content goes for images as for posts. Lastly, use common sense. No lengthy signatures please. Save us some scrolling. Thank you.       Links in signatures:   Please understand that w3schools.com only exists because of voluntary work and is barely supported by the advertising littered throughout the tutorials and the forum. So, please, stop advertising other sites. DO not post links that drive traffic away from the w3schools domain - especially to a site that offers similar if not identical information. Please help support the site by keeping individuals on it. Thank you. Here are some guidelines as to what you can put in your signature: w3schools links --> allowed w3.org links --> allowed browser links --> allowed html editor links --> allowed personal sites --> allowed tutorial sites competing with w3schools --> NOT allowed sites completely irrelevant to webprogramming and this forum --> NOT allowed   Thanks for understanding, and for taking the time to read this. ~W3Schools Modstaff~
annyvz

Force div to stay far right on responsive design

9 posts in this topic

Hi,

 

I have added text in a div over an image which is responsive. however when I test on a bigger screen the text does not display on the far right as I want it to.

 

How can I force the div to always stay in the far right corner?

 

I have the following code:

 

CSS

 

h2 {font-size: 23px;font-weight: normal;height: 50px;left: 0;line-height: 120%;margin: 0 auto;position: absolute;right: -824px;text-align: right;text-decoration: none;top: 120px;width: 392px;text-align: right;}

 

HTML

 

<body style="margin: 0; padding: px"><div class="image b" align="center"> <img src="Images/blank_banner.png" border="0" class="responsive-image" alt="Null"> <div class="text container"> <h2>24h Support: +27 (79) 874 0113<br>E-mail: <a href="mailto:myaddress.co.za" target="_blank" class="white">info@support.co.za</a></h2> </div></div>

 

Any help will be greatly appreciated.

 

Thank you!

 

Share this post


Link to post
Share on other sites

The success of this maybe working depends on what styling has been applied to other elements.

Share this post


Link to post
Share on other sites

If I use something like this in my code, perhaps it will work? Does the position left and right refer to a spesific point on the page?

 

h2.pos_left { position: relative; left: -20px;}h2.pos_right { position: relative; left: 20px;}

 

Thank you

Share this post


Link to post
Share on other sites

No, it means just moving left to specific distance from current position, but using position: relative; means its boundary area would includes what was its original position, that other elements can't occupy.

 

position: absolute positioning is relative to the outer edges of parent element using position:relative (with the outermost parent being the body element) .

position absolute occupy no space on the page, so other elements will occupy its vacant area.

Share this post


Link to post
Share on other sites

I sent you a PM about this before I had posting privelages, but wanted to reply to your thread too in case this might help someone else.

 

In your h2 styles, take out the position:absolute and right:-824px, and add this instead...

 

float:right;

Share this post


Link to post
Share on other sites

Or, you could use this if you want it to truly stick to the bottom right corner:

 

position:absolute;

right:0;

bottom:0;

 

I'll try to explain what's going on in your code so you have a better idea how to procede.

 

position:absolute; takes the element in question out of the normal flow of the document.

 

For example, if I had three paragraphs in a row in an HTML document, normally they would apear in your browser one right after the other in the same order they are written in the HTML document. However, when I use position:absolute on one of those paragraphs, I'm removing it from the document flow, and can position it anywere on the page, relative to the top, bottom, left, and right sides of the browser window.

 

I made a really quick codepen to show you exactly what I mean: http://codepen.io/anon/pen/sLdzJ

 

When you look at the HTML, paragraph one, paragraph two, and paragraph three are in order. But when you look at the way the code is rendered, paragraph two is taken out of the normal order and stuck at the bottom right corner of the window.

 

So, when you say

 

possition:absolute;

right:0;

bottom:0;

 

You're really saying, take this element out of it's normal position, and put it 0px from the right edge of the browser window, and 0px from the bottom of the browser window.

 

The reason your original code doesn't work on bigger monitors is because you're saying you want the element positioned left:0 (which means 0px from the left edge of the screen) and THEN you're saying right:-824px which moves it from the left edge over to the right by 824px. If you didn't have left:0 first, the h2 would start at it's normal position and then be moved to the right 824px which would be 824px off the screen to the right.

 

Positioning the h2 to the very left edge of the screen, then pushing it over to the right 824px is basically the same thing as saying left:824px (ie position the elemet 824px from the left edge of the screen). When the monitor gets bigger, instead of the h2 appearing somewhere near the right edge, it's appearing closer to the middle b/c it's still only getting pushed 824px to the right from the left edge of the window.

 

Typically, you only use left or right positioning, but not both. You would also use top or bottom possitioning, but not both, because they cancel each other out.

 

OK, now on to the second part of your question.

 

Position:relative; means you want to position the element relative to where it would normally be in the page. So, going back to the paragraph example, if I had the second paragraph positione:relative; and left:20px; the paragraph would appear basically in it's normal position, sandwiched between the first and third paragraphs, but it would be indented to the left by 20px compaired to the normal paragraphs.

 

I'm not sure why you're creating a pos_left and pos_right class for the H2.

 

The first one

 

h2.pos_left { position: relative; left: -20px;}

 

would position the h2 20px to the right of where it would normally be.

 

The second one

 

 

h2.pos_right { position: relative; left: 20px;}

 

would move the H2 20px to the left of its default position on the page.

 

If you use these at the same time, they will just cancel each other out. Seperately, neither of them will position the h2 at the bottom right of the page.

 

I hope that makes sense!

Edited by Mikasa Ackerman

Share this post


Link to post
Share on other sites

 

The first one

 

h2.pos_left { position: relative; left: -20px;}

 

would position the h2 20px to the right of where it would normally be.

 

The second one

 

 

h2.pos_right { position: relative; left: 20px;}

 

would move the H2 20px to the left of its default position on the page.

 

Wrong way round.

 

 

Typically, you only use left or right positioning, but not both. You would also use top or bottom possitioning, but not both, because they cancel each other out.

 

 

Typically YOU CAN use both, but to position an element left right etc, you probably should use one or the other depending on the result you require.

 

EDIT: When you require overlap of text over image position: absolute is ideal for this, about the only thing it is ideal for, float just would just make text sit beside the image.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Sorry, it was late at night when I typed that response. You're right, I've got the position:relative example the wrong way around.

 

 

 

 

Typically YOU CAN use both, but to position an element left right etc, you probably should use one or the other depending on the result you require.

 

EDIT: When you require overlap of text over image position: absolute is ideal for this, about the only thing it is ideal for, float just would just make text sit beside the image.

 

Yes, you can use both left and right positioning, as shown above. I did not say you can't use both. I said you wouldn't usually do it. To do so makes things unnecessarily confusing in my opinion.

 

In fact, I'm a little confused by some behavior I'm seeing in a codepen, if you don't mind could you take a look and telling me what's happening.

 

http://codepen.io/anon/pen/ezmjA

 

The red box is in it's normal position inside a body container that is 1200px wide. The body is positioned relatively so that the divs inside it will position themselves relative to this container, rather than to the browser window (or in this case the codepen frame).

 

The green box is positioned relatively, 1000px from the left and 500px from the right. The right positioning appears to have no effect nomatter what length it's set to, for positive and negative values. The position of the box is the same even if you remove the "right" declaration all together.

 

The blue box is positioned absolutely, 1000px from the left, and 500px from the right. Again, nomatter what the right possition is set to, it does not appear to have an effect. Removing the "right" declaration has no effect.

 

For both the green and blue boxes, it does not seem to make a difference what order the left and right positions are written in the CSS. Even writing something exagerated like the following:

right:5000px;left:1000px;

the boxes are still positioned 1000px from the left. This makes me wonder if maybe left just always has priority over right?

 

The purple box has its left/right margins are set to "auto". This was the case in the OP's scenario. Before adding any other styles the purple box is centered horizontally as expected. When its position is changed to absolute, it goes to the left side of the screen. I've positioned it t at the bottom of the div so that it does not overlap the blue box. Positioning 1000px from the left puts it in the same X position as the green and blue boxes. Adding a right position of 500px does nothing. Using positioning from the right -50px does nothing. but a right value of -500px moves the purple box further off screen to the right. Rearanging the order of the left and right declarations makes no difference.

 

I'm not understanding why in the green and blue boxes the right declaration seems to have no effect nomatter what the value, and nomatter what order it's in whenever there is a left declaration.

 

Im also not understanding why the purple box, with the addition of a left and right margin of auto, sort of seems to obey some of the right position declarations, but not always.

 

Yes, float in this specific example won't work unless there is some positioning of the image that we're not seeing in the code that's provided. In any case, do you think it's a better idea to use the image as a background image of "text-container" instead of in the markup, and position text container instead of positioning the h2. It's hard to say what the right answer is though, without having a better idea of what thefinal result should look like. I can't see the image in question when I test to it's tough to say what will work best.

 

In general, I don't like positioning things absolutely if I can avoid it, which is why I recommended using a float (I wasn't taking the image being in the markup into consideration). Absolute positioning does have it's place, but taking elements out of the content flow and then remembering the context of the parent elements can be confusing, particularly for maintanence later on. With well organized code, this shouldn't be too much of an issue, but as a beginner it can be confusing to remember why an element is in a certain position when, based on the markup, it looks like it should be elsewhere.

Share this post


Link to post
Share on other sites

After reading up on this, it seems it is dependant on ltr or rtl usage that the precedence will change from left or right, also i suspect you will not get the same results in all browsers as regard to margin: 0 auto; example. I totally agree about using position: absolute, that it should be used as very last resort, IF the result cannot be achieved using margins, padding and float, as i am forever telling beginners to css who use position: absolute for layout, but it is generally accepted when it come to overlapping text over image, position: absolute; is the best option in this situation.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now