extend an empty div the length of a page

Question

I have two divs set at 100 pixels absolutely positioned on the left and right sides of the page. I have a content section margined between them. I want the images to scroll with the page as you scroll from top to bottom of the larger pages. There are seven total pages in my site of varying sizes and i am trying to use CSS to make this work. Can anyone help me?

Are you saying you want the images to stay in position and not move? Also, can you share the CSS _in question_ along with a basic page that shows the problem that you're trying to overcome? ~~ http://stackoverflow.com/questions/how-to-ask — jcolebrand, Nov 16 '10 at 23:19

score 2 · Answer 1 · answered Nov 16 '10 at 23:25

2

Look at css fixed positioning.

position:fixed; top:0px; left:0px;

See here: http://limpid.nl/lab/css/fixed/left-sidebar-and-right-sidebar

answered Nov 16 '10 at 23:25

superUntitled

22,351
30
83
110

It should be noted that position:fixed is not supported in IE6 and does not work for mobile devices such as the iPhone (in case these things happen to be concerns). – RussellUresti Nov 16 '10 at 23:28
Thanks, the link provided has a better way to work with hand held devices and such. – superUntitled Nov 16 '10 at 23:32

JonVD · Answer 2 · 2010-11-18T13:30:32.860

0

Here is an example that might solve your problem.

It uses the background-attachment:fixed; but you could also use the position:fixed attibute depending on how you want to have your images static in an element or scroll with the page. The issue with the background option is it will require you to design a background image for it, but it will work.

EDIT: Here is an excellent post on fixed positioning and cross browser compatibility.

edited Nov 18 '10 at 13:30

answered Nov 16 '10 at 23:29

JonVD

4,258
24
24

i have them in a div, I set the properties to fixed, but i have positioned the div's with the position: absolute; attribute. I need the outer divs to match the height of the content div and then have the background images scroll with the page depending on how long the page is. – Robert Frey Nov 18 '10 at 03:59
I see your problem, these sorts of things can be a little nasty. If you could post a simplified version of your divs and css that would help a lot in providing a solution =) In the meantime I read a great post on exactly this issue and have added it into the Edit section of my answer. – JonVD Nov 18 '10 at 13:29

score 0 · Answer 3 · edited Feb 21 '11 at 23:26

<div id="image1">
</div>

<div id="image2">
</div>

#image1 {
    position: absolute;
    width: 100px;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    background-image: url(../media/warlock.jpg);
    min-height: 100%;
    height: 100%;
    background-position: center;
    background-attachment: scroll;
}

#image2 {
    position: absolute;
    width: 100px;
    top: 0px;
    right: 0px;
    padding: 0;
    background-image: url(../media/paladin.jpg);
    min-height: 100%;
    height: 100%;
    background-position: center;
    background-attachment: scroll;
    background-repeat: repeat;
}

That is basically the code for the two side divs. They are completly void of anything but background images that I want to scroll the length of the page.

extend an empty div the length of a page

3 Answers3