Im fairly new to CSS and im trying to do a few things for a site im putting together. I've got a basic sample below that is causing me issues.
As you can see i have a 100% table, in the left column i have 3 divs, one 100% high and the other 2 have no defined heights ( they will expand in height as needed ). of course the bottom div goes beyond the screen as the 100% high one above it pushes it off, but if i dont make the middle one 100% high it doesnt expand all the way.
Is there any way around this, there may be more divs in between the header and footer that are unknown height, but i like the extra room filled with a 100% div. I know i could do this type of thing using tables not a problem. Ultimately id like that middle div to be replaced by an IFrame ( this only needs to work in ie 5.5 and above ). But again i think thats also problematic when i put the 100% tag in the iframe.
Can anyone help or advise me if this is even doable? Thanks
<HTML> <head> <title></title> <body> <table border="1" cellspacing="1" width="100%" id="AutoNumber1" height="100%"> <tr> <td width="50%" height="100%" valign="top"> <div style=" border: 1px solid red;">HEADER</div> <div style=" height:100%;border: 1px solid blue;">100% CONTENT</div> <div style=" border: 1px solid red;">Footer</div></td> <td width="50%"> </td> </tr> </table> </body> </html>