Hi!
I would like to make something like this:
+-----------------+
|A |
| |
| +----+ |
| |B | |
| | | |
| +----+ |
| |
+-----------------+
A is a body and B is a DIV which has fixed distance above and bellow (so
its height depends on body height).
What I would like is that for short DIV content there is fixed distance
atop and bellow. But if content is bigger than it is possible to put
into that DIV height, DIV should grow and make body bigger too - so the
distance atop and bellow would be still fixed;
I have tryed something like this:
<div style="position : absolute; width: 200px; top: 100px; bottom: 25px;
background: #ff0000;> ... </div>
Where ... is some text.
It works in Mozilla for short texts. But for longer ones text "breakes"
out of the box - how is this possible? - so DIV height is fixed to
window height but text just goes on and on.
In IE it does not work at all.
I would like to stress that "position: fixed;" is not a solution as DIV
should scroll and be in relation to other page elements.
Maybe there is some other solution to it. Like for example:
+-----------------+
|A |
| |
| +----+ |
| |B | |
| | | |
| +----+ |
| |C | |
+-----------------+
Where C is a small transparent DIV which make space under the B DIV. But
the problem is how to tell B DIV to have height such that C will be
always at the bottom of the page or screen (whichever comes last).
Mike
