Question

Sorry if the title is not too descriptive, but I didn’t know how to put it. The problem is:

1 and 2, are divs that only contains background graphics, and have fixed width and height.

I would like 3 and 4 to contains also background graphic, but with dynamic height. It means if there will be much content, 3 and 4 will be higher, proportionally to additional content. Also 3 and 4 should always touching footer.

I know that propably this is easy, but I have hard time to position 3 and 4 on its place. What is needed html/css structure for this or how to accomplish this?

Added:

Base code – under areas 1 and 2, should be areas 3 and 4 that would join them with the footer regardless of size of content area.

Answer 1

There’s probably a simpler way to do this, but it’s tricky getting a column to stretch down to match the dynamic height of a sibling, and I often resort to absolute positioning.

Make 3 divs for columns to contain 1) divs #1 and #3 of your diagram, 2) div for dynamic content and 3) divs 2 and 4 in your diagram.

Place these 3 inside a div (I gave this one an id of “all”). Apply a clearfix style to this container (style defined at end of my CSS). Apply position:relative to this div. You also need to set the width of this container exactly to contain the three columns (necessary to properly account for the 3rd, absolutely positioned column)

Fix the widths of each of the 3 columns according to your design, float the first 2. Make the 3rd, however, position:absolute. Set top:0px; bottom:0px;right:0px;

Then set the heights of the 2 divs inside with percentages according to the proportions you want.

My solution has quite a bit in it. so I’ve kept the code at jsfiddle: http://jsfiddle.net/feaLC/5/

Adjust the amount of text in the dynamic content area to see how it works.

UPDATE — completely revised based on asker’s clarification:

I’d accomplish this by absolutely positioning a left- and right-colum, and then absolutely positioned the 2nd div inside each of those 2 columns to stretch all the way to the bottom:

See also: http://jsfiddle.net/feaLC/6/

HTML:

<div id="header"></div>
<div id="all" >
    <div id="leftCol">
    <div id="left1"></div>
    <div id="left3"></div>
    </div>
    <div id="content">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 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 text text text 
    </div>
    <div id="rightCol">
    <div id="right2"></div>
    <div id="right4"></div>
    </div>
</div>
<div id="footer"></div>

CSS:

#all, #footer, #header{position:relative;width:500px;}
#footer, #header{background:green;height:30px;}

#content{width:300px;padding:0px 100px}

#rightCol, #leftCol{position:absolute;width:100px;top:0px;bottom:0px;}
#rightCol{left:0px;}
#leftCol{right:0px;}

#left1, #right2{background:yellow;height:100px;}
#left3, #right4{background:DarkRed;position: 
        absolute;left:0px;right:0px;bottom:0px;top:100px;}