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

Question

I have 4 divs with ids A, B, C and D as shown below:

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

Div A and D have a fixed width and height. Div B has a fixed width. I want Div B height and Div C height + width to be calculated automatically. I want to stretch Div B and C between div A and D. Also I want to stretch Div c between div B and the right edge. This way, the page will not have any scrollbars and blank space.

My expected layout as below

How can I make this possible using jquery / css ?? Anyone have a solution, and pls give me a fiddle / demo?

Thanks in advance... :)

blasteralfred

Answer 1

, , , .

, jQuery. ?

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>

---

, , , ? http://jsfiddle.net/thirtydot/4BR9s/1/

Answer 2

+1 !

, jQuery. , , , Google. " ", : http://css-tricks.com/the-perfect-fluid-width-layout/

Answer 3

Here is a jquery 'animate' example:

$('your_selector').animate({
'height':'<your_calculated_height>',
'width':'<your_calculated_width>'
},'slow');