Jump to content

Force div to stay far right on responsive design


annyvz

Recommended Posts

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!

 

Link to comment
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

Link to comment
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.

Link to comment
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
Link to comment
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
Link to comment
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.

Link to comment
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.

Link to comment
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
×
×
  • Create New...