split panels (left and right)
Posted: Tue Dec 18, 2007 10:10 pm
I have the following CSS/HTML which if you load into a browser you will see I am trying to emulate two panes using a splitter:
If you fill the right column up with text so that the div pushed off screen...ideally there should be a scroll bar that appears...
This is accomplished with an overflow: auto and the left DIV having it's bottom: 0 set.
Works in all browsers but...IE6 (IE7, FF, OP, etc all work fine of course).
Anyone have any clue as to why and do you have any work arounds? If the scrolling isn't possible...
I at least need the blue separator bar to stretch for the entire height of either left or right panel which ever is greater...
Should I just resort to tables?
I have tried setting height to 100% but this doesn't typically cause the blue separator to fill the height, which is why I figured overflow might work...unfortunately it does...except that it requires bottom: 0 and IE6 doesn't seem to like it...
Ideas?
If you could explain any code provided that would be appreciated...
Cheers
Code: Select all
<html>
<style>
html, body {
width: 100%;
height: 100%;
}
</style>
<body>
<div>
<h3>Header Logo<h3>
Some smaller filler text
</div>
<div style="bottom: 110px">
<div id="left" style="position: absolute; top: 95px; left: 0px; width: 300px; height: 100%; overflow: auto; border-right: 8px solid #19548C">
This is a test line<br />
</div>
<hr class="accessibility" />
<div id="right" style="position: relative; margin-left: 300px; padding: 15px;">
Right panel
</div>
</div>
</body>If you fill the right column up with text so that the div pushed off screen...ideally there should be a scroll bar that appears...
This is accomplished with an overflow: auto and the left DIV having it's bottom: 0 set.
Works in all browsers but...IE6 (IE7, FF, OP, etc all work fine of course).
Anyone have any clue as to why and do you have any work arounds? If the scrolling isn't possible...
I at least need the blue separator bar to stretch for the entire height of either left or right panel which ever is greater...
Should I just resort to tables?
I have tried setting height to 100% but this doesn't typically cause the blue separator to fill the height, which is why I figured overflow might work...unfortunately it does...except that it requires bottom: 0 and IE6 doesn't seem to like it...
Ideas?
If you could explain any code provided that would be appreciated...
Cheers