Forum Moderators: not2easy
I need a layout where the header and footer stay fixed and the 2 columns in the content stretch the full height of the browser no matter what the resolution is. Also, in instances where the user has their resolution set low (800x600), I need for each column to add scrollbars if the content exceeds the user's screen height. The application is going to be used in a somewhat controlled environment where most users will be using IE6. Please help
Im not sure that you can achieve this purely with css. I think what you are needing is to create either frames or an <IFRAME> element.
The only other alternative that I can think of would be to use <textarea> forms with dynamic population:
<form name="formexample">
<select name="selectoption" size="1" onChange="showtext()">
<option value="select" readonly Selected>Select from the list></option>
<option value="1" readonly>Option one</option>
<option value="2">Option two</option>
<option value="3">Option three</option>
</select>
<TEXTAREA rows=6 cols=26 wrap="physical" name="show" readonly>Select from above</textarea>
<script language="javascript">
var description=new Array()
description[0]="Select"
description[1]="This is information"+'\n'+" the +'\n'+ between quotation marks forces a carraige return allowing a tidy display of text"+'\n'+"Remember to close with a closing quotation mark"
description[2]="This is another option."+'\n'+"I am sure you can see where this is going?"
description[3]="Get the idea?"
function showtext(){
document.formexample.show.value=description[document.formexample.selectoption.selectedIndex];
}
</SCRIPT>
</FORM>
In the textarea tag you can adjust the rows and columns to fit.
This example could also be modified to send different information to several textareas if you so wanted.
Bear in mind that purely by using the above method I could populate several form elements with text or pictures (or both). I hope this helps?
Note, IE 6 has some new problems with overflow:auto if there are blank spaces in the scrolling portion, when the cursor hits that blank space the scrolling will break, very confusing to visitor, they have no idea what is wrong.
See this thread [webmasterworld.com] for more on using iframes in this context.
Firebird/firefox are the only other browsers out there that support overflow auto correctly, with mouseover mousewheel scrolling, Opera 7.5 is close, but requires a click in the scrolling space before it will scroll, bad. Safari does not support it I believe, neither for some odd reason does Mozilla proper.
Iframes might be your best bet, easiest to code in, if it's a closed environment and you don't need to worry about search engines that's what I would use, since they would do the job perfectly.
instead of one absolutely positioned #content column at 100%, just split in into 2..
Suzy
the expressions will calculate the height/width of the divs based on the resolution at initial page load and will need to be reloaded to recalulate
let me know if that's not it?
Suzy
