• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 216
  • 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.
  • 2
1 Solution
Mark StegglesWeb DeveloperCommented:

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

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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<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-->
css file
.wrapper {
.leftcol {
.div1 {
.div2 {
.div3 {

Open in new window

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!
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

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