extending a div 100%

Posted on 2008-11-14
Last Modified: 2012-05-05
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.
Question by:jpking72
    LVL 30

    Accepted Solution


    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


    Author Comment

    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" "">
    <html xmlns="">
    <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


    Author Comment

    i got it 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!
    LVL 42

    Expert Comment

    by:David S.
    It's still not clear to me what you are trying to do.

    This example layout might help though:

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    7 Experts available now in Live!

    Get 1:1 Help Now