Align to bottom of screen on at load only (with CSS)

[Raz316]

The whole image is the page (with some classy lines to show text content)
The red border is the screen
The blue box is the item I want aligned at startup

I want the blue box to align to the bottom of the screen at page load only. That is, when the user scrolls, the blue box scrolls as well (I don't want it to be on screen the whole time).

Is this possible with CSS only? I would like to avoid using javascript but understand it might not be possible.

Ta

[scaryjim]

It's probably not possible just with CSS - the standard way to do this would be using { position: fixed; bottom: 0px; } but that wouldn't scroll up - it'd stayed "docked" to the bottom of the browser.

Not sure why you'd want it to do this though, tbh - surely the blue bar will obscure a portion of the content if it moves with the page? If you could explain a bit about the design reasoning behind it it might point towards a solution?

[Raz316]

It's probably not possible just with CSS - the standard way to do this would be using { position: fixed; bottom: 0px; } but that wouldn't scroll up - it'd stayed "docked" to the bottom of the browser.

Not sure why you'd want it to do this though, tbh - surely the blue bar will obscure a portion of the content if it moves with the page? If you could explain a bit about the design reasoning behind it it might point towards a solution?

To be honest Jim, I can't explain it, I am just following orders (he says with a beaten and non-caring sigh). "It has to be on the front page at the start, but not at the top, that's too aggressive, we don't want to scare off potential blah blah blah, lose interest in half a blah blah, key demographic blah"

Deep down... deep down I know that eventually I'll get this working, probably with Javascript just for someone to say "NO, its rubbish.. etc etc, just put it at the top, we need to be more aggressive blah blah"

I would also like to take this opportunity to apologise to Hexus for asking for help while at the same time showing next to no enthusiasm for question!

[scaryjim]

No worries, I know exactly where you're coming from - I'm in my last week as a developer, and am so glad to be getting away from it!

Basically, there's three places worth putting stuff - top, left hand side, and bottom right. Don't put *anything* you want people to see on the top right, it won't get looked at (at least, not in a left-to-right language society!). If I was you, I'd suggest having it in the bottom right corner permanently, as this will get noticed as people read down the page, it won't be too aggressive, and can be done with pure CSS ( { position: fixed; bottom: 0px; right: 0px; }.

Other options that spring to mind are having it across the bottom with a position: fixed but adding a javascript link to hide that div; having it in slotted between some of the content (although a lot of users dislike having the content broken up) and just left in the normal flow (so it won't align to the bottom, but it will be noticable as the user scrolls).

To get exactly what they want I think you'll need to either leave it in the normal flow and resize the element above it onload (using js) so it pushes it into place (this will avoid overlaying the content but will break it up significantly), or absolutely position the element then set the top value onload (using js) to position it - but that *will* overlay the content. Neither will, IMNSHO, look good or make it more likely that people will take note of the positioned content, as it's going to interrupt the content one way or another.

[Raz316]

No worries, I know exactly where you're coming from - I'm in my last week as a developer, and am so glad to be getting away from it!

I envy you I'd say I'm just having one of those days, but it's more like one of those 6 months.

To get exactly what they want I think you'll need to either leave it in the normal flow and resize the element above it onload (using js) so it pushes it into place (this will avoid overlaying the content but will break it up significantly), or absolutely position the element then set the top value onload (using js) to position it - but that *will* overlay the content. Neither will, IMNSHO, look good or make it more likely that people will take note of the positioned content, as it's going to interrupt the content one way or another.

Thanks for the suggestions and I agree with you completely. I've as good as said I don't think it's easily (tastefully) possible so I'll just wait and see.