Is it possible to divide a web page in half horizontally and make each...

J

Justin C

New member
...division scrollable in PHP? I've been trying but using the PHP 'overflow:auto' doesn't work when an element height is set as a percentage (such as making a table cell 50% of the page height).

Any ideas?
I've tried to do the same thing within a table (as I use a table to divide my webpage) and it won't work.
This is the basic idea. When extra content is added, though, it doesn't work.

<html>
<head>
<style type="text/css">
body{height:100%;margin:0;}
.tbl{height:100%;width:100%;}
.half{height:50%;width:100%;overflow: auto;}
.main{width:100%;height:100%;background-color:ffffff;border:1px solid black;padding:10px}
</style>
</head>

<body>
<table class="tbl"><tr style="height:100px"><td>
<p>Title</p>
</td></tr>
<tr><td style="width:100px">
<p>Sidebar</p>
</td>
<td>
<div class="main">
<div class="half">
<p>Top content</p>
</div>
<div class="half">
<p>Bottom content</p>
</div>
</div>
</td></tr>
</table>
</body>
</html>
Thanks Gary V. I would have liked to have set it to 100% of the window height, but if that's not possible, I'll go with your suggestion.
 
Back
Top