How to auto adjust (stretch) div height and width using jQuery or CSS

Question

I have 4 divs with ids A, B, C and D, like below;

<div id="A"></div>
<div id="content">
    <div id="B"></div>
    <div id="C"></div>
</div>
<div id="D"></div>

Div A & D have fixed width & height. Div B has fixed width. I want the height of Div B and height + width of Div C calculated automatically. I want to stretch Divs B and C in between div A and D. Also I want to stretch Div c in between div B and right margin. The page thus wont be having any scroll bars and empty space.

My expected layout is like below

How can I make this possible using jquery / css?? Anybody has a solution and pls give me a fiddle / demo ??

Thanks in advance...:)

blasteralfred

Answer 1

Well, despite asking, I'm still not entirely sure what you want.

I don't think you have to use jQuery for it either. How's this?

Live Demo

CSS:

#container {
    position: relative;
    width: 200px;
    height: 200px;
}
#top, #left, #right, #bottom {
    position: absolute
}
#top {
    top: 0;
    width: 100%;
    height: 50px;
    background: #00b7f0
}
#left {
    top: 50px;
    width: 50px;
    bottom: 50px;
    background: #787878
}
#right {
    top: 50px;
    left: 50px;
    right: 0;
    bottom: 50px;
    background: #ff7e00
}
#bottom {
    bottom: 0;
    width: 100%;
    height: 50px;
    background: #9dbb61
}

HTML:

<div id="container">
    <div id="top"></div>
    <div id="left"></div>
    <div id="right"></div>
    <div id="bottom"></div>
</div>

---

Or maybe you want it like this instead? http://jsfiddle.net/thirtydot/4BR9s/1/