Vic wrote:
I had a bit of a re-think and tried something slightly different
I played around with your problem and came up with this.
I hope that it will help.
--
Gus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitl ed Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {background-color: white; margin: 0; padding: 0; height: 100%; }
#menuBar { position: absolute; top: 100px; background-color: Black;
color:white; width: 100%; height: 50px; }
#logo {position: relative; top:0; left: 10%; width: 80%; border: 1px
solid red; height: 160px; }
#bit2Wrapper { position: absolute; top: 0; left: 10%; width: 80%;
height: 100%; }
#bit2 {position: relative; top:0; left: 10%; width: 80%;
background-color: silver; overflow: auto; height: 200px; top:50%;
margin-top: -20px; }
</style>
</head>
<body>
<div id="logo">
LOGO<br>
This is the latest - trying to center the scrollable box in the
available space and then also when resized.
</div>
<div id="menuBar">
The Menu Bar
</div>
<div id="bit2Wrapper ">
<div id="bit2">
<p>Exercise: to center the scrollable box within the available space
below Logo and Menu Bar and maintain this centering on page resizing (as
I understand the problem).<br>
One thing I don't understand is why you wish the Menu Bar to overlap the
Logo (dimension error? Red border applied).</p>
<p>Although it may be possible, to center a percentage valued box, I'm
unable to achieve it,
so I'm presenting a method where the scrollable box is of a fixed height
value and hopefully it will be either useful as is, or help to achieve
it by using a percentage height value.</p>
<p>All items are clear by looking at the code. The only item which may
require explanation is the method I used to achieve the vertical
centering.</p>
<p>The way I did it, is to position the top edge of the scrollable DIV
down with top:50% and then applied the following formula to get the
value for margin-top:</p>
<pre>
(Logo Height/2) - (Scrollable DIV Height/2)
</pre>
<p>A caveat to this is that overlapping will occur if screen size is
sufficiently decreased.<br>
--<br>
Gus</p>
</div>
</div>
</body>
</html>
