Question

I have a page news.html which is php included in my index.html – inside a #content div.
news.html has another div, which floats on the right and has a vertical line jpg to separate it from the main content, adds and stuff like that will be placed there.

Problem is I can’t get it to 100% height(although it works for the line jpg) and I think the reason is some css issue. I also cannot place it below the footer for some reason, so that the 100% height line does not override it.
I use a main.css file for every page.

If I use position:fixed for the #poll div height 100% works, but then when zooming in/out of the browser my div moves which is not what I want. I know there is a min-width property but didn’t seem to work for me.

Here is my code:

index.html:

//Content div is placed inside a #main table//
<div id="content"><?php include "news.html"?></div>

main.css:

   html, body{
        height:100%;    
    }
        #main{  
            width:1010px;
            height:100%;
            z-index:2;
        }
        #content{
            margin-top: 303px;
            height:100%;
            z-index:1;
        }
        #footer{
            z-index:2;
        }
        #poll{
            height:100%
            background-color:rgba(255,0,0,0.6);
            float:right;
            z-index:1;
}

news.html

<div id="poll"><div style="background-image:url(images/vertical.jpg); width:5px; height:100%; background-repeat:repeat-y; vertical-align:top; position:fixed; top:0; z-index:0;"></div>
    <div>POLL CONTENT HERE</div>
</div>

Answer 1

If you use z-index then give to at least one position relative or absolute

Then it will work, like this:

{
   z-index:2;
   position:relative;
}

How to work Z-index Link here