Seymour Clufley
09-20-2008, 04:07 AM
http://img261.imageshack.us/img261/3715/overflowautobv5.jpg
NOTE: This image has been edited to reduce its total dimensions, hence the gradient jump in the titlebar etc. Hopefully, the problem remains clear.
In this post I refer to "MainDiv". This is the DIV you can see with scrollbars.
I want MainDiv to be a fixed width and a fixed height. This is so that the page doesn't get scrollbars, only the div, and everything remains within the client dimensions. Furthermore, I don't want the div to have a horizontal scrollbar; content within it should be squeezed so that a horizontal scrollbar is not needed.
Now, I managed that - just about.
I did it by calling this JS function OnLoad and OnResize:
<SCRIPT type="text/javascript">
function ResizeMainDiv() {
document.getElementById("maindiv").style.height = GetClientHeight() - 290 + "px";
var nw = GetClientWidth() - 100-100-33-33-12
document.getElementById("maindiv").style.width = nw-40 + "px";
var nh = GetClientHeight() - 33
document.getElementById("maindiv").style.height = nh-300 + "px";
}
</SCRIPT>
And here's the HTML that opens the "MainDiv":
<DIV id=maindiv style="font-family:Courier New; color:#356eff; width:100%; margin-left:97px; border:3px solid #0a3256; border-top:0px; background-image:url(graphics/space-texture.jpg); padding:20px; overflow:auto; ">
It almost works! The trouble is, as you can see in the screenshot, MainDiv still gets a horizontal scrollbar because the content is not quite squeezed enough. (The offending scrollbar has a red rectangle around it.)
The HTML that goes inside MainDiv could be almost anything but it will always involve DIVs which should take up 100% of the available width inside MainDiv. In the pictured example, the two visible DIVs - Captain and Dalek - are the inner HTML (there are more identical DIVs above and below) and, yes, their width is 100%. If I change that to 96%, the horizontal scrollbar disappears. But I'd rather not do that!
What am I doing wrong?
I'm also finding that using the overflow:auto setting is stopping some Z-indexing from working. See this thread (http://www.htmlforums.com/html-xhtml/t-bar-graph-problem-overlaying-divs-i-think-108014.html).
Thanks for reading,
Seymour.
NOTE: This image has been edited to reduce its total dimensions, hence the gradient jump in the titlebar etc. Hopefully, the problem remains clear.
In this post I refer to "MainDiv". This is the DIV you can see with scrollbars.
I want MainDiv to be a fixed width and a fixed height. This is so that the page doesn't get scrollbars, only the div, and everything remains within the client dimensions. Furthermore, I don't want the div to have a horizontal scrollbar; content within it should be squeezed so that a horizontal scrollbar is not needed.
Now, I managed that - just about.
I did it by calling this JS function OnLoad and OnResize:
<SCRIPT type="text/javascript">
function ResizeMainDiv() {
document.getElementById("maindiv").style.height = GetClientHeight() - 290 + "px";
var nw = GetClientWidth() - 100-100-33-33-12
document.getElementById("maindiv").style.width = nw-40 + "px";
var nh = GetClientHeight() - 33
document.getElementById("maindiv").style.height = nh-300 + "px";
}
</SCRIPT>
And here's the HTML that opens the "MainDiv":
<DIV id=maindiv style="font-family:Courier New; color:#356eff; width:100%; margin-left:97px; border:3px solid #0a3256; border-top:0px; background-image:url(graphics/space-texture.jpg); padding:20px; overflow:auto; ">
It almost works! The trouble is, as you can see in the screenshot, MainDiv still gets a horizontal scrollbar because the content is not quite squeezed enough. (The offending scrollbar has a red rectangle around it.)
The HTML that goes inside MainDiv could be almost anything but it will always involve DIVs which should take up 100% of the available width inside MainDiv. In the pictured example, the two visible DIVs - Captain and Dalek - are the inner HTML (there are more identical DIVs above and below) and, yes, their width is 100%. If I change that to 96%, the horizontal scrollbar disappears. But I'd rather not do that!
What am I doing wrong?
I'm also finding that using the overflow:auto setting is stopping some Z-indexing from working. See this thread (http://www.htmlforums.com/html-xhtml/t-bar-graph-problem-overlaying-divs-i-think-108014.html).
Thanks for reading,
Seymour.