[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 128
  • Last Modified:

Flexible three column layout with horizontally scrolling middle column - is it possible?

The requirements for what I'm working on are as follows:

There are three columns in the layout. Together, they will always occupy 100% browser width
The three columns are all always approximately the same height, so that doesn't need to be taken into consideration.
The left hand column should take up as much horizontal space as it needs for its content.
The right hand column should take up as much horizontal space as it needs for its content.
The middle column should take up whatever horizontal space remains, and if this is not sufficient to display the content in it, it should have a horizontal scrollbar.
Additionally, the right hand column can be switched on/off via a javascript toggle button. When off, the displays 'middle' column will stretch to occupy the space where the right hand column was (retaining the scrollbar if still necessary)

Is this even possible? I've played around for a few hours but I simply cannot get it to work. I end up with either the middle column not scrolling and the width going over 100%, or the right hand column wrapping below the other two, or some similar problem.

In the event this isn't possible, I'll accept the answer which is the closest approximation to what I'm trying to do.
0
AK_00
Asked:
AK_00
  • 2
  • 2
  • 2
  • +1
1 Solution
 
magedroshdyCommented:
- don't give the left and right column a spacific width
- in the middle column, give it fixed expected width with style='overflow:scroll'
it will do the trick
0
 
DerZaubererCommented:
Try like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>MyTitle</title>
</head>
<body style="margin: 4px;">
<table border="1" style="100%">
<tr>
<td>
asdfasfasdsdfasdasasfasdfasdf
</td>
<td style="width:100%">
<table border="1">
<tr>
<td style="width:100%"><div style="overflow:auto;"><div style="width:0px;">erewrewewrewrewrerewer</div></div>
</td>
<td>
eweewrweewwerewrewrewrew
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Open in new window

0
 
DerZaubererCommented:
I just noticed with <div style="width:1px;"> instead of 0px it's should be working in safari as well.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
AK_00Author Commented:
DerZauberer, that's almost perfect. There's just one small refinement I would like if it's possible.

If you use something for the middle content like a table with width 100% (example below) the table cells will be compressed to their minimum valid width rather than stretching to 100% of the middle column width. This is fine when the middle content needs to scroll anyway, but it doesn't look quite so neat if the content could stretch to use more space. Is there a way to do this also?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>MyTitle</title>
</head>
<body style="margin: 4px;">
<table border="1" style="100%">
<tr>
<td>
asdfasfasdsdfasdasasfasdfasdf
</td>
<td style="width:100%">
<table border="1">
<tr>
<td style="width:100%"><div style="overflow:auto;"><div style="width: 1px;">
<table style="width: 100%">
	<tr>
		<td>123</td>
		<td>123</td>
		<td>123</td>
	</tr>
</table>
</div></div>
</td>
<td>
eweewrweewwerewrewrewrew
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Open in new window

0
 
magedroshdyCommented:
try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>MyTitle</title>
</head>
<body style="margin: 4px;">
<table border="1" style="100%">
<tr>
<td>
asdfasfasdsdfasdasasfasdfasdf
</td>
<td style="width:100%">
<table border="1">
<tr>
<td style="width:100%"><div style="overflow:auto;"><div>
<table style="width: 100%">
	<tr>
		<td>123</td>
		<td>123</td>
		<td>123</td>
	</tr>
</table>
</div></div>
</td>
<td>
eweewrweewwerewrewrewrew
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Open in new window

0
 
AK_00Author Commented:
That will allow the middle column content to stretch to fill the space available if the space is wider than the content, but it looks like it also prevents it from scrolling if the content is wider than the space available.

Is there a way to programmatically determine if a scrollbar is present? If so I could use some javascript to conditionally switch between the two perhaps. Unless there's a neater way to do it with CSS.
0
 
GaryCommented:
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now