• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 214
  • Last Modified:

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.
0
jpking72
Asked:
jpking72
  • 2
1 Solution
 
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
 
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now