CODEWITHSUNDEEP
javascriptjquerycss
Alfred
Alfred

Reputation: 21396

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

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

enter image description here

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

Thanks in advance...:)

blasteralfred

Upvotes: 5

Views: 10199

Answers (3)

thecodeparadox
thecodeparadox

Reputation: 87073

Here is an example of jquery 'animate':

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

Upvotes: 1

thirtydot
thirtydot

Reputation: 228172

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/

Upvotes: 4

n8wrl
n8wrl

Reputation: 19765

+1 for the diagram!

I don't think you need jQuery for this. I know you asked for a specific example for you, but there are several good resources that popped up on Google. Look for 'fluid layout' and specifically here: http://css-tricks.com/the-perfect-fluid-width-layout/

Upvotes: 1

Related Questions