Question

i have a DIV with dynamic content and resize function.
Here is an example -> http://jsfiddle.net/UsRuh/4/

The problem is the dynamic content.
Example -> http://jsfiddle.net/UsRuh/5/

It will only work when i set the padding from the #main DIV higher.
Example -> http://jsfiddle.net/UsRuh/6/

Is it possible (only with CSS, no JS!) to resolve this problem?

CSS

#header {
    background-color:#faf; }

#main {
    position: absolute; top: 18px; left: 18px; width: 384px; height: 157px;
    padding:0px 0px 80px 0px;
    position: absolute;
    overflow:hidden;}

#scrollDiv {
    background-color:#ccaacc;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 25px;
    width: 100%; }

HTML

<div id="main">

    <div id="header">Head</div>

    <div style="background-color:#555;"> some dynamic content text text text text <br /> some dynamic content</div>

    <div id="scrollDiv"> some dynamic content width "invisible" scroll<br />text text text text text text text text text text text text text text text text text text text text text text text text text text text text .... ext text </div>

    <div style="background-color:#555;"> some dynamic content text text text text <br /> some dynamic content</div>

</div>

EDIT:
If no other solution exists, please tell me.

Answer 1

There are no CSS-only crossbrowser solutions available.

The only way to achieve it now — to use extra wrappers and display:table + display:table-raw, so it would look like that: http://jsfiddle.net/kizu/UsRuh/28/

The problem still: IE. IE6 and IE7 won’t understand table values of the display property.

So there are only two possible ways to overcome IE:

• use expressions (but it’s the same as the use of JS)
• use unsemantic table instead of divs, so it would work everywhere.

That’s really a big problem and table layout was the only posible solution for a long time. However, in the future (and now in webkit and firefox) we can try to use the flexible box model.

With flexible box model it’s realy easy to achieve what you want only with CSS: http://jsfiddle.net/kizu/UsRuh/29/

And that’s why the flexible box model appeared. Too sad, it’s availability is still not perfect.