Positioning Confusion!

[Margate]

Hello Everyone,
I am working on a site and after thinking it was complete I checked it on an ipad and voila it fell apart! Well not quite but it does not perform as I want it to…

I am having a “problem” with positioning my elements and have made a very basic example of what I am trying to fix. The green-container div must span 100% vertically and the contents div must remain horizontal in the center of the browser. All done but, I want the green-strip to remain vertically behind the contents-div. Whenever the browser is scrolled the contents-div moves but not the green-container div.

I have made an example in CodePen: http://cdpn.io/tLvlA

Thank you very much for any help : )

[lschoen114]

Change the position of the green area to absolute. Not fixed.

[Paulie_D]

I’m more interested in what it is you are trying to do and why.

Absolute positioning (and fixed for that matter ) is too often used to solve problems that should, perhaps, be solved in more flexible and maintainable ways.

[Margate]

Hello Ischoem114,
If I change the green area to absolute as apposed to fixed then the div (green area) shrinks when the browser is scrolled horizontally! I do not want this to happen. I want to ensure that the green band always stays 100% across the window.

[Margate]

Hello Paulie_D,
What I am trying to do is basically have the green band stay 100% across the screen and always be 100px down from the top with a height of 400px. The container div sits on top and is always in the middle (horizontally). My example is just for the sake of finding out how to do this. The way I am designing my site is not what you see in my example just a problem that will be solved if I can fix my example.
Thank you for your help.

[Paulie_D]

>The way I am designing my site is not what you see in my example just a problem that will be solved if I can fix my example.

That is my point.

Until we know what the green band div is going to be used for it’s hard to offer a definitive solution.

I could tell you to use a background image but I wouldn’t actually know if it was right. It might be a slider area or a menu….we just don’t know and any advice we might provide could be completely wrong.

[Margate]

Hello Paulie_D,
The green-band will have a background-image contained in it yes your absolutely right. The image will fill the div (the div will not just be green).

Thank you for your help. : )

[Paulie_D]

Right..so the green band will actually be a single image that must **always** be 100px down from the top of the viewport regardless of the scrolling of the window?

Is that right?

[Margate]

yes and no! It will be a repeating image like a background (the image will repeat and fill the div). It always has to spread 100% across the browser window and basically cannot move from its position! Everything else will be on top of this and will not be effected by it at all. Like its not there.

[Paulie_D]

Like this: http://codepen.io/Paulie-D/full/amsEv ?

[Margate]

Horizontally yes, but I want the background-image (div) to scroll vertically when the page is scrolled and move with the text. Everything is good but I want the image to remain with the container horizontally whilst remaining at 100% of the page width at all times.

[Margate]

Hello Pauline_D,
I have worked out what I was trying to do:

http://codepen.io/Margate/full/pEFGi

I added in “min-width: 1000px;” into the green-strip div and it worked!
Only problem is that it ie does not like it but then what does it like?!
I will look for a JS workaround but this does what I want it to for the time being!
Thank you very much for your help : )

[Author]

Posts