Page 1 of 1

split panels (left and right)

Posted: Tue Dec 18, 2007 10:10 pm
by alex.barylski
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:

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 :)

Posted: Wed Dec 19, 2007 1:07 am
by matthijs
Unfortunately I don't have access to IE6 right now, but I might give some general ideas.

First, make sure to use a valid doctype. That can make big difference in some situations.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
Then, you might consider another approach. If I were you I would use a repeating background image as the border. Set that image in the right position in the parent container of the left and right columns, and let it repeat downwards. Then you'll have a border as high as the highest col. I would also go for normal flow or floats. From the top of my head something like:

Code: Select all

#wrapper {
  background:#fff url(bgimg.gif) 300px 0 repeat-y;
}
#leftcol { 
float:left;
width:300px;
}
#rightcol {
margin: 0 0 0 320px;
}

Code: Select all

<div id="wrapper">
  <div id="leftcol">
  </div>
  <div id="rightcol">
  </div>
</div>
You might need some clearing method for the wrapper if it doesn't clear (and therefore the border image doesn't show to the bottom of it).

Posted: Wed Dec 19, 2007 1:22 am
by alex.barylski
matthijs wrote:Unfortunately I don't have access to IE6 right now, but I might give some general ideas.
Thanks for the reply...

I thought about using faux column approach, however because the entire application is themable...that presents a minor headache...as the splitter is adjusted to suit the theme. Not only that, but the left column is moveable (both using javascript and PHP - the position persists when the user drops the splitter).

I think:

1) I use the current technique and have some JS adjust the height of the left panel in IE6 - no javascript, no splitter - sorry IE6. :P
2) I use tables. I tried this and the blated code made me re-think my first technique. Possibly using faux column as a backup.

The reason I wanted a DIV to flex from top to bottom was that if someone clicks the splitter at the bottom, where the physical DIV isn't...and try to resize...they'll be bewildered as the pslitter won't move. I could use JS to detected if the click is within the splitter area...but again...this is more work...

The most elegant solution I think is to just use JS in IE as the CSS works fine in all other browsers except IE. I could use an IE CSS conditional and just render the splitter using faux columns if nessecary and then adjust the background image position using javascript to final effect. Actually in saying that...if I use JS period I might as well just adjust the height of the left panel and forget about using faux columns at all... :P

What do you think?

Posted: Wed Dec 19, 2007 1:32 am
by matthijs
Aha, now I get the problem. Faux cols isn't very easily themable indeed.

I would at least keep things simple. Make it work in all browsers and sent IE6 with conditional comments a rule to hack the bug. It's properly a single line of css to make IE6 behave. A few lines of js wouldn't be bad either in this case (although I think not necessary). Maybe this afternoon when I have the courage to open IE6 and I have time I can have a second look

Posted: Wed Dec 19, 2007 2:30 pm
by alex.barylski
matthijs wrote:Aha, now I get the problem. Faux cols isn't very easily themable indeed.

I would at least keep things simple. Make it work in all browsers and sent IE6 with conditional comments a rule to hack the bug. It's properly a single line of css to make IE6 behave. A few lines of js wouldn't be bad either in this case (although I think not necessary). Maybe this afternoon when I have the courage to open IE6 and I have time I can have a second look
Since I've started trying to make accessible pages using CSS I've really come to hate IE6. :P

So frustrating.

Posted: Wed Dec 19, 2007 8:22 pm
by Jonah Bron
As I understand it, overflow should be set to scroll

Code: Select all

<div style="overflow: scroll;">...