scroll image doesn't work

Question

The following codes are not working as intended.

index.html

 #header { z-index: 2; height: 90px; width: 100%; min-width: 1060px; } #footer { position: absolute; z-index: 2; } #top-wrapper { overflow-x: auto; } #main-content { min-width: 1060px; position: absolute; overflow-y: auto; } #image-wrapper { padding-left: 20%; padding-right: 20%; width: 100%; height: 500px; } #coordinations { position: absolute; width: 100%; height: 500px; } 

 <div id="top-wrapper"> <div id="header"> <!-- some nav menu --> </div> <div id="main-content"> <div id="image-wrapper"></div> <div id="coordinations"></div> </div> <div id="footer"> <!-- some footer note --> </div> </div> 

The problem here is my scroll has the invisible #coordination div, which I can't make it into zero or get rid of (since it has all the coordinations I need to use on the #image-wrapper div).

I tried to make invisible div on top #main-content div, so use the overflow-y but it doesn't work. I tried to contain #main-content inside a bigger div and min-height to some x value. Still it doesn't work.

Any possible way I can have #image-wrapper without the invisible content from #coordinations?

Update

#coordinations
{
position:relative;
width:100%;
height:0px;
}

Sorry I didn't see this, but by changing position to relative and height to 0px. The coordination points or children of #coordinations are not affected.

Thank you for your help.

Answer 1

You already have #coordinations set as display: absolute , why not just move it off-screen with a left: -9999px; ?