Stretching a content div

I'm working on a page with a menu that grows and shrinks dynamically (represented by the red box). The content box (white box) is supposed to grow and shrink with the red box (red box should fit inside the white box). What's happening is the red box is spilling out over the white rather than stretching it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

body {
background:white;
}

#outercontainer-overflow {
margin:0 auto;
min-width:980px;
overflow:hidden;
}

#outercontainer {
margin:0 auto;
position:relative;
width:980px;
}

#background {
background:#000;
height:auto!important;
margin:0 auto auto -360px;
min-height:950px;
width:1700px;
}

#contentoverlay {
background:#000;
width:1700px;
}

#wrap {
width:980px;
margin:0 auto;
background:white;
}
#navigation {
width:178px;
position:relative;
float:left;
overflow:hidden;
background:#FF0000;
left:14px;
top:133px;
}

#header {
height:28px;
left:208px;
position:absolute;
top:157px;
width:595px;
}

h1 {
font-size:18px;
left:24px;
position:absolute;
text-transform:uppercase;
top:4px;
}

#homebutton {
left:525px;
position:absolute;
top:6px;
}

#homebutton a {
background:#009900;
display:block;
overflow:hidden;
padding-left:52px;
width:0;
}

#homebutton a:hover {
background:#00FF00;
}

#bodyarea {
padding:204px 24px 25px 232px;
width:547px;
}

#body-content {
height:auto!important;
min-height:225px;
overflow:hidden;
}

#ctas {
background:#0000FF;
height:459px;
left:803px;
position:absolute;
top:20px;
width:162px;
}
</style>

</head>

<body>

<div id="wrap">
<div id="navigation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus arcu erat, accumsan nec, ultrices a, dictum in, est. Proin pretium sapien a nulla. Pellentesque volutpat aliquet purus. Nulla id neque. Fusce eu risus. Suspendisse in sapien. Aenean suscipit erat id magna. Curabitur orci. Vestibulum nunc. Pellentesque a metus. Nulla vitae neque sed turpis ornare condimentum. Nunc molestie. Donec sed nisl. Vivamus sed dolor pretium elit vestibulum interdum. Vestibulum pretium, nulla eu mattis adipiscing, lacus elit condimentum orci, at aliquam dolor quam a lacus. Ut vitae est non lorem egestas blandit. Donec dignissim ligula ac ante. Praesent consequat ullamcorper odio. </div>

<div id="header">
<h1>Test</h1>
<div id="homebutton">
<a href="http://www.google.ca">Home</a>
</div>

</div>

<div id="bodyarea">
<div id="body-content">
<h2>Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus arcu erat, accumsan nec, ultrices a, dictum in, est. Proin pretium sapien a nulla. Pellentesque volutpat aliquet purus. Nulla id neque. Fusce eu risus. Suspendisse in sapien. Aenean suscipit erat id magna. Curabitur orci. Vestibulum nunc. Pellentesque a metus. Nulla vitae neque sed turpis ornare condimentum. Nunc molestie. Donec sed nisl. Vivamus sed dolor pretium elit vestibulum interdum. Vestibulum pretium, nulla eu mattis adipiscing, lacus elit condimentum orci, at aliquam dolor quam a lacus. Ut vitae est non lorem egestas blandit. Donec dignissim ligula ac ante. Praesent consequat ullamcorper odio. </p>
</div>
</div>

<div id="ctas">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus arcu erat, accumsan nec, ultrices a, dictum in, est. Proin pretium sapien a nulla. Pellentesque volutpat aliquet purus. Nulla id neque. Fusce eu risus. Suspendisse in sapien. Aenean suscipit erat id magna. Curabitur orci. Vestibulum nunc. Pellentesque a metus. Nulla vitae neque sed turpis ornare condimentum. Nunc molestie. Donec sed nisl. Vivamus sed dolor pretium elit vestibulum interdum. Vestibulum pretium, nulla eu mattis adipiscing, lacus elit condimentum orci, at aliquam dolor quam a lacus. Ut vitae est non lorem egestas blandit. Donec dignissim ligula ac ante. Praesent consequat ullamcorper odio.</div>

</div>

</div>
</div>
</div>
</div>

</body>
</html>

Can someone please help?

Stretching a content div

Make content div dynamically grow and shrink depending on height of nav

devin mcmanus

simonuk

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week