Question

I am currently testing a few things with DIVs instead of always using tables.

So I created a small design like:

<div id="container">
    <div id="header"><h1>Header of the page</h1></div>
    <div style="width: 27px; float: left;"><img src="style/images/top_left_corner.jpg" alt="" /></div>
    <div style="width: 859px; float: left;"><img src="style/images/top_bar.jpg" alt="" /></div>
    <div style="width: 28px; float: left;"><img src="style/images/top_right_corner.jpg" alt="" /></div>
    <div style="width: 27px; float: left;"><img src="style/images/left_vert_bar1.jpg" alt="" /></div>
    <div style="width: 859px; float: left;">
        <div id="top_content">
            <div id="explanation">
                <span>Some text comes here</span>
            </div>

            <div id="form">
                <form method="post" action="index.php" enctype="multipart/form-data">
                    <label for="file">File:</label>
                    <input type="file" name="datei" size="40" maxlength="100000" />&nbsp;<input type="submit" name="sub" value="Submit" />
                </form>
            </div>
        </div>
    </div>
    <div style="width: 28px; float: left;"><img src="style/images/right_vert_bar1.jpg" alt="" /></div>
    <div class="left_dyn">&nbsp;</div>
        <div id="middle_content">
            <div id="form_output">Here is the outcome of the Form</div>
        </div>
    <div class="right_dyn">&nbsp;</div>
    <div style="width: 27px; float: left; clear: left;"><img src="style/images/left_vert_bar2.jpg" alt="" /></div>
    <div id="placeholder">&nbsp;</div>
    <div style="width: 28px; float: left;"><img src="style/images/right_vert_bar2.jpg" alt="" /></div>
    <div style="width: 27px; float: left;"><img src="style/images/bottom_left_corner.jpg" alt="" /></div>
    <div style="width: 859px; float: left;"><img src="style/images/bottom_bar.jpg" alt="" /></div>
    <div style="width: 28px; float: left;"><img src="style/images/bottom_right_corner.jpg" alt="" /></div>
    <div id="footer"><span>Some Footer Text</span></div>
</div>

Now the DIVs with class="left_dyn" and class="right_dyn" show a background image which has been setup in my CSS file and should repeat vertically, when there is some content in the DIV id="form_output"

This is how class="left_dyn" and class="right_dyn" look like in the CSS file:

/* Dyn Design */
.left_dyn {
         background: url('../images/left_dyn_bar.jpg') repeat-y scroll;
         width: 27px;
         float: left;
}

.right_dyn {
         background: url('../images/right_dyn_bar.jpg') repeat-y scroll; 
         width: 28px;
         float: left;
}

However when I enter some content in the DIV id="form_output", the DIV class="left_dyn" and class="right_dyn" grow in height, but the bakcground image does not repeat vertically 🙁

I have got the impression that I do not see the wood with all those trees.

Answer 1

Okay I’ve found a solution:

Like I mentioned above, the problem is that your left_dyn and right_dyn columns don’t expand with the form_output div. One solution to the problem is to set the following css rules on these two divs:

padding-bottom: 32000px; /* Arbitrary number big enough to cover expanding content */
margin-bottom: -32000px;

This will basically expand the left_dyn/right_dyn divs to match the height of your form_output div.

You’ll then have to set on your parent container as this’ll hide any overflow:

overflow: hidden;

I tried editing this inline on your page and noticed it works except for a problem with your footer. This can easily be resolved by taking your footer outside the parent wrapper.

I’ve knocked up a quick demo explaining the effect here: http://jsfiddle.net/mWLL9/