div bottom right alignment (with scrollbars)

[tifneedham]

Hi!

I have figured out how to move my div containers to the bottom right corner of the web browser. My problem is that when the window is decreased in size, a scrollbar does not appear so the user can scroll down to see the text. In fact, it seems like my text has actually become part of the background.

How can I align the text to the bottom right corner of the website (as it is now) but also let the viewer scroll down to see the text when the browser window gets too small.

Thanks!!

a sample of the problem: http://decadeshop.co.kr/test.html

[Akuseru]

Well, i think that understand what you’re trying to accomplish. First, delete the

html{overflow-x: scroll; overflow-y: scroll;}

Then if you want that the “content div” stay always in the bottom left you can leave like it is now, if you want to add more content bellow I recommend you this:

 #content-wrapper{

width: 100%;

position relative;

margin: 400px /*For example*/ auto auto 50px; }

#content{

bottom: 20px;

float: right;

padding-bottom: 0;

padding-left: 20px;

padding-right: 0;

padding-top: 20px;

right: 20px;

width: 720px; } 

Wrap the content div in a relative-positioned div that keep it in position. The margin top (400px) will determine the separation from the top of the whole page. Tell me more about your problem.

[tifneedham]

Thanks so much for helping me out!!

I made the margin changes and I see what you’re saying. But right now I’m working on a 13″ laptop and the margins (margin: 400px /*For example*/ auto auto 50px; } ) push the text off the browser window so I have to scroll down and over to see the last bit of the text.

The thing is that I want that text box to always be at the bottom right corner of the browser window. I only want it to start scrolling when the text no longer all fits on the browser window.

This website is a good example of what I’m looking for: http://ringvemedia.com/
My text is like the “GOTOCHINA” text — it’s anchored in the corner. But, when you resize the browser from the left or the top it moves to always stay about 60px away from the edge of the window. When you go to far and the text box is no longer visible, you can scroll to see the text.

My problem is that somehow my content is not recognized and when the browser window is resized, the content seems to just fall off the window like it was a background image and not scrollable content.

Know what I mean?

Thanks again for helping me out!!

http://decadeshop.co.kr/test.html

[tifneedham]

Thanks! That worked but it brings me back to my original problem:

When the browser window is moved to a smaller size the text is no longer visible and there’s no way to scroll to see it.

If you grab the bottom right corner of your broswer and resize the window (move up and to the left), a scrollbar does not appear when the browser window is too small to fit all the text and logo on the screen. The text & logo are acting like they are just part of the background.

How do I make sure scrollbars appear when the browser window can’t fit all the text on the screen.

Thanks again for everyone’s help! I need to get the project done soon and this is the one thing holding me back!

[tifneedham]

Eric – thanks for the tip

sl1dr – I don’t know much about media queries. I have only been working with basic CSS and HTML and I was thinking that there’s got to be a simple solution to this that I’m just missing.

When I change the position of the div container to the top left, and then I resize the window, I do get scrollbars if the window becomes too small for the text. Why do I not see scrollbars only when I move it to the bottom right corner?! Grr…

Is there a simple solution to this?

[tifneedham]

virtual –

I removed the position absolute from the content div. You are right it gave me a vertical scrollbar exactly when I resize the browser window, but now it is no longer anchored in the bottom right corner of the screen.

Is there any way to anchor it in the bottom right and have that scrollbar when I resize?

[tifneedham]

virtual –

Thanks so much for the suggestion! I think it looks & functions a lot better. I made the margin-top a little smaller though because the 30% was pushing the text off the browser window.

http://decadeshop.co.kr/test.html

One thing — does the margin-top change according to how big the browser window is? For example, If I make the browser window smaller, that top margin will only be 30% of the screen?

Finally, does anyone know how to make a background image rotate with each refresh of the window?

Thanks!!

[nicasi]

Hi there,

As you noticed the left side of the browser edge is treated differently than the right side. As an example try to absolutely position an element out of the viewport to the right – you’ll get a scrollbar. If you place an element out of the viewport to the left you won’t get a scrollbar, the element just disappears. Same thing happens if you place an element right aligned but it goes off the left side of the viewport, it just disappears, no scrollbar to scroll it back into view.

What you can do is wrap the element in a division with min-width as below. The division expands over the body width till the specified minimum width, scrollbars will appear if viewport gets smaller.

This is right and bottom aligned

[Author]

Posts