extending a div 100%

I've got a web page with 3 divs, two on top of each other on the left and one on the right, using up the rest of the space.    When I try to shade the bottom left div, it only shades where there is text is and not the whole div.  I need the entire bottom left div shaded and the height has to be flexible.
jpking72Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Mark StegglesWeb DeveloperCommented:
Hello,

We need more from you.. like a link to the page or some code. I suspect you are using floats? and you are trying to use a percentage height on a float? This u cannot do. But post some more information and we will be able to help

Thanks
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jpking72Author Commented:
ok i'm attaching a simplified version of the problem I am having:  div2 I wanted shaded, the entire thing, not just where there is text.  The web page should be a minimum of 400px and be flexible for more than that.
=============================
html file
=============================
<!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>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div class="wrapper">
<div class="leftcol">
<div class="div1">Content for  class "div1" Goes Here</div>
<div class="div2"></div>
</div><!--end of leftcol-->
<div class="div3"></div>
</div><!--end of wrapper-->
</body>
</html>
================================
css file
================================
.wrapper {
width:800px;
height:400px;
}
 
.leftcol {
width:167px;
}
 
.div1 {
height:118px;
}
 
.div2 {
background-color:#F5F5F5;
}
 
.div3 {
}

Open in new window

0
jpking72Author Commented:
i got it working...you have to define the height of the parent container to use "height:100%" .  So if you want it to work with pages of variable height you have to define the body.class height individually.  like:

body.test {height: 500px;}
body.test2 {height: 200px;}

If anyone knows of a better way let me know!  Thanks!
0
David S.Commented:
It's still not clear to me what you are trying to do.

This example layout might help though: http://www.pmob.co.uk/temp/2columncentred_equalising.htm
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.