- This topic is empty.
June 20, 2013 at 11:36 am #45702
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 : )June 20, 2013 at 12:03 pm #139620lschoen114Participant
Change the position of the green area to absolute. Not fixed.June 20, 2013 at 1:58 pm #139640
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.June 20, 2013 at 4:54 pm #139654
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.June 20, 2013 at 4:57 pm #139655
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.June 20, 2013 at 5:01 pm #139656
>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.June 20, 2013 at 5:04 pm #139657
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. : )June 20, 2013 at 5:06 pm #139658
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?June 20, 2013 at 5:13 pm #139659
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.June 20, 2013 at 5:21 pm #139661June 20, 2013 at 5:41 pm #139663
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.June 20, 2013 at 7:19 pm #139672
I have worked out what I was trying to do:
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 : )
- The forum ‘CSS’ is closed to new topics and replies.