Div Tag 100% not actually 100%

Hi,

I'm trying to figure out why when I set my div tag to a height of 100% it does not fill the parent container to 100%. The tag I'm trying to expand to 100% is called "newSideBar". Here is the relevant CSS and HTML.

Also, none of the classes set in these tags have any width, height, or positioning information in them.

        <div id="midOutline" style="width:100%; height:100%; padding:0px;">
            <div id="newSideBar" style="position:static; float:left; height:100%; width:200px; margin-top:5px; background-color:#A29470;">
                
            <table class="subCategoryBar" bgcolor="#A29470" style="padding-bottom:200px; padding-top:30px; padding-left:10px; border-top:3px double #FFFFFF; border-bottom:3px double #FFFFFF; height:auto;">

...

</table>
</div>
...
</div>

Code (markup):

And here is a screenshot of what the result looks like. The brown bar on the left should extend down to the picture of the lock.



Thanks in advance,

Brian

 

You need to specify a height in for your wrapper in order for height:100% to work.

 

Yes. When you say 100%, you have to think "100% of what?". It's always of the height of the parent element but, then, what is the height of the parent element? etc.

 

That's what I'm confused about...my height properties from the top down go like this (the tag in question is bolded)

height:auto;
height:auto;
height:100%;
height:100%;

Shouldn't the two bottom tags adjust to the second tag's height automatically?

Or do "100%" values not automatically resize when their parents' height value is set to "auto"?

 

Anybody have any other recommendations?

 

None at all???

 

percentage widths/height doest not work unless you specify some width/height in pixels in parent div.

 

Ok, so I just set all main container div tags heights to 100% and nothing changed.

So does anyone know why this wouldn't work?

 

brian, you will need to set a number of pixels (absolute number, not relative with %) to solve this, but I'm sure there's a more pro look into the problem, as I never had it and you can't really restrict the page to a X number of pixels. Make sure the wrapper is 100% also..

 

http://www.positioniseverything.net/articles/onetruelayout/equalheight