CSS: Need an element to scale vertically with its neighbor

Best illustrated with an image, perhaps.

1. The tall area (b) to the left of the main content-filled element (d) needs to scale along with that content element (d), but still needs that top-left corner piece (a) at its top.
2. There also needs to be elements capping off the bottom of both columns as indicated (c, e).
3. The entire area cannot exceed 640px in width.
4. There will be more than one of these s开发者_Go百科ections within the flow of the document, so they can't be absolutely positioned or whatever.
5. The left column (a,b,c) is a fixed width, and the cap pieces (a,c,e) are fixed heights. The right column can be fixed width, if that makes things simpler.

How do I do this?

---

Something along these lines might achieve what you want; it uses absolute positioning for the various pieces (a, c, e) but within a non-absolutely positioned div which you can repeat.

The 'b' section is created using the '.main' div since it'll expand with the content of '.rightColumn'. I assumed as there was no content in there you'd be filling it with a colour or image, so put any image etc. for the 'b' piece in the styling for the '.main' div.

HTML

<div class="main">

    <div class="leftColumnTopCap"></div>

    <div class="rightColumn">

        <p>Your content here...</p>

    </div>

    <div class="leftColumnBottomCap"><div>
    <div class="rightColumnBottomCap"></div>

</div>

CSS

.main {
    /* Any 'b' piece styling goes in here. */
    display: block;
    float: left;
    width: 640px;
    margin: 0;
    padding: 0 0 100px 0; /* Change 100px to whatever the height of your bottom caps are. */
    position: relative; /* We can use relative positioning here. */
}

.rightColumn {
    display: block;
    float: right;
    width: 540px; /* Change to whatever width piece '640px - width of a' is. */
    margin: 0;
    padding: 0;
}

.leftColumnTopCap {
    position: absolute; /* The absolute position here relates to the 'main' div. */
    top: 0;
    left: 0;
    width: 100px; /* Change to whatever width piece 'a' is. */
    height: 100px; /* Change to whatever height piece 'a' is. */
}

.leftColumnBottomCap {
    position: absolute; /* The absolute position here relates to the 'main' div. */
    bottom: 0;
    left: 0;
    width: 100px; /* Change to whatever width piece 'c' is. */
    height: 100px; /* Change to whatever height piece 'c' is. */
}

.rightColumnBottomCap {
    position: absolute; /* The absolute position here relates to the 'main' div. */
    bottom: 0;
    right: 0;
    width: 540px; /* Change to whatever width piece '640px - width of a' is. */
    height: 540px; /* Change to whatever height piece '640px - width of a' is. */
}

Hope that helps.

---

Sometimes tables area the most feasible idea to get the job done. I would consider this such a situation, risking being bashed since "tables should not be used for design/layout".

Other solutions would require (if targeted across multiple browsers) a lot of javascript or the CSS3 flexible box layout module.