Containers extending to the bottom of page/content

ShootingBlanks · June 9, 2011

Hello. I have a main container div with three sub-container divs (left, middle, right) that I would all like to extend to the bottom of the page, regardless of how much content is in them.

They all extend INDIVIDUALLY, but they will not expand TOGETHER (so if there's a lot of content in the left side, that side will expand down but the middle and right will remain "short").

You can see the example here:

http://www.stacykaiser.com/NEWSITE/index.php

Here is my HTML code:

<!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>Stacy Kaiser</title>
<link href="includes/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">

    <div id="leftside">
    	<div class="hr"><img src="images/hr.jpg" style="margin-top: 30px; margin-botton: 0px;" /></div>
        <h1>Biography</h1>
        <img src="images/bio_headshot.jpg" class="fleft" />
        <p>Stacy Kaiser is a successful Southern California based licensed psychotherapist, relationship expert and media personality. With over 50 television appearances in the last year on major networks including CNN, NBC, CBS, MSNBC and FOX, Stacy has built a reputation for bringing a unique mix of thoughtful and provocative insight to a wide range of topics. Stacy tackles the demands of a thriving private practice while meeting the daily challenges as a mother of two school-age children. She is a much sought after public speaker on a wide variety of topics, ranging from office and personal relationship issues to anger management  and family politics. In addition to her numerous television appearances, her expertise and unique perspective have been solicited by a diverse group of clients including major corporations, public institutions, government agencies and philanthropic organizations.</p>
<p>Stacy possesses a unique ability to identify the essence of issues and problems quickly. Her style is honest and forthright, while also bearing the compassion and sensitivity that are fundamental to her profession.</p>
    	<p>As a psychotherapist on both Celebrity Fit Club and Lifetime's DietTribe, Stacy Kaiser has gained a reputation for helping people face the truth that is holding them back from leading a life filled with a generous balance of responsibility, fun and freedom. After providing counseling to thousands of individuals both in her private practice and the media, Stacy has identified ten critical areas needed to develop the skills necessary to become a successful, happy and fulfilled adult.</p>
    	<img src="images/bio_book.jpg" class="fright" />
<p>In her new book "How to be a Grown UpThe Ten Secret Skills Everyone Needs to Know" published by HarperCollins, Spring 2010, Stacy opens with a provocative quiz that helps the reader gain insight into his or her current level of life mastery. In the following chapters, she breaks down the readers strengths and weaknesses to guide them towards improving in the ten areas so that they can maximize their success and ultimately their life. A passion for improving the lives of the under served within her community led to Stacy's work with Southern California's premier family resource center, Friends of the Family, where she has worked with battered women, teen parents, abused children and families in crisis for the past 15 years. She has also  been engaged by organizations including the FBI, Los Angeles Fire Department, Los Angeles Unified School District, Kaiser Permanente and Hughes Aircraft to implement workshops and handle third party mediations.</p>
<p>Stacy Kaiser received her B.A. in Psychology from California State University, Northridge and her M.A. in Clinical Psychology from Pepperdine University. She is a licensed Marriage and Family Therapist and has received advanced training in the areas of human and child development, as well as emotional, physical and sexual abuse.</p>
    </div>
    
    <div id="middle_container">
    	<div id="middle">
        	<img src="images/header.jpg" style="margin-top:30px;" />
            <img src="images/headshot.jpg" style="margin-top:30px;" />
            <?php include('includes/nav.php'); ?>
            <p style="font-size:.6em; color:#606A66;">Copyright 2007 © <a href="http://www.stacykaiser.com/">www.stacykaiser.com</a>. All rights reserved.</p>
    	</div>
    </div>
    
    <div id="rightside">
    
    </div>

</div>
</body>
</html>

And here is my CSS code:

@charset "utf-8";
/* CSS Document */

html, body {
background: #615041;
font-family: Arial, Helvetica, sans-serif;
color: #CCC;
font-size: .9em;
padding: 0px;
margin: 0px;
}

h1 {
color: #43C1E3;
font-size: 2.42em;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
letter-spacing: 6px;
margin-bottom: 20px;
padding: 0px;
line-height: 20px;
}

a:link, a:visited, a:active {
color: #43C1E3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

#container {
width: 766px;
margin:auto;
}

#leftside {
width: 373px;
float: left;
background: #665446 url(../images/bkgnd_gradient_left.jpg) repeat-x;
min-height: 748px;
padding: 0px 15px;
}

#middle_container {
width: 313px;
float: left;
background: #352E2A url(../images/bkgnd_gradient_shadow.jpg) repeat-x;
min-height: 748px;
}

#middle {
width: 285px;
height: 100%;
min-height: 748px;
margin: auto;
text-align: center;
background: #463931;
border-left: #45403C 5px solid;
border-right: #45403C 5px solid;
}

#rightside {
width: 50px;
float: left;
background: #977A68 url(../images/bkgnd_gradient_right.jpg) repeat-x;
min-height: 748px;
}

.hr {
text-align: center;
margin: 15px 0px;
padding: 0px;
}

.fleft {
float: left;
margin: 5px 10px 5px 0px;
}

.fright {
float: right;
margin: 5px 0px 5px 10px;
}

/* NAVIGATION ROLLOVERS */
a#bio:link, a#bio:visited, a#bio:active {
display: inline-block;
width: 117px;
height: 30px;
text-decoration: none;
background: url(../images/nav/bio.png);
}
a#bio:hover {
background-position: -117px 0px;
}
a#video:link, a#video:visited, a#video:active {
display: inline-block;
width: 90px;
height: 30px;
text-decoration: none;
background: url(../images/nav/video.png);
}
a#video:hover {
background-position: -90px 0px;
}
a#press:link, a#press:visited, a#press:active {
display: inline-block;
width: 145px;
height: 30px;
text-decoration: none;
background: url(../images/nav/press.png);
}
a#press:hover {
background-position: -145px 0px;
}
a#appearances:link, a#appearances:visited, a#appearances:active {
display: inline-block;
width: 200px;
height: 30px;
text-decoration: none;
background: url(../images/nav/appearances.png);
}
a#appearances:hover {
background-position: -200px 0px;
}
a#privatepractice:link, a#privatepractice:visited, a#privatepractice:active {
display: inline-block;
width: 145px;
height: 30px;
text-decoration: none;
background: url(../images/nav/privatepractice.png);
}
a#privatepractice:hover {
background-position: -145px 0px;
}
a#corporateconsulting:link, a#corporateconsulting:visited, a#corporateconsulting:active {
display: inline-block;
width: 184px;
height: 30px;
text-decoration: none;
background: url(../images/nav/corporateconsulting.png);
}
a#corporateconsulting:hover {
background-position: -184px 0px;
}
a#contact:link, a#contact:visited, a#contact:active {
display: inline-block;
width: 105px;
height: 30px;
text-decoration: none;
background: url(../images/nav/contact.png);
}
a#contact:hover {
background-position: -105px 0px;
}

Any help would be GREATLY appreciated! Thanks!!!

cssfreakie · June 9, 2011

You could do this in 2 ways.

Wrap both divs in a container div and make a background image that combines the colors used in both divs and make it repeat-y.

So no matter what it seems as if they both stretch to the bottom while they don't.

And second way would be to use javascript to get the height of the page (so that is not 100%) and set both heights of the divs to that value inline. I recommend to use jquery for that.

cssfreakie · June 9, 2011

in case you never worked with Jquery here is a possible example.

       <div id="wrapper">
           <div id="a" class="stretch"></div>
           <div id="b" class="stretch"></div>
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script type="text/javascript">
        
        $(document).ready(function(){
            $("div.stretch").css("height",$(document).height());      
        });
    </script>

this code just checks the document height and applies it to any element with the class of stretch.

with pure css it could like like this

<style type="text/css">
  #wrapper{
     background: url(combined-background-image.png) repeat-y;
     width: 960px;
     margin:0 auto;
     overflow:hidden;
}

</style>

       <div id="wrapper">
           <div id="a"></div>
           <div id="b"></div>
        </div>

ShootingBlanks · June 9, 2011

Yeah - I have virtually no experience with JS or JQuery. But I was fudging with some CSS workarounds, and I am SO close, but can't figure out this last part...

...I have the main three divs in my three-column layout spanning towards the bottom now. But where I'm stuck is that the middle div/column has ANOTHER div inside it that ALSO needs to span to the bottom (and is not). If you could offer a final solution based on my code, that would be so amazing!

Here is the updated link again:

http://www.stacykaiser.com/NEWSITE/index.php

Here's my updated HTML:

<!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>Stacy Kaiser</title>
<link href="includes/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container_main">
    <div id="background_right">
        <div id="background_middle">
            <div id="background_left">
    
        <div id="content_left">
            <div class="hr"><img src="images/hr.jpg" style="margin-top: 30px; margin-botton: 0px;" /></div>
            <h1>Biography</h1>
            <img src="images/bio_headshot.jpg" class="fleft" />
            <p>Stacy Kaiser is a successful Southern California based licensed psychotherapist, relationship expert and media personality. With over 50 television appearances in the last year on major networks including CNN, NBC, CBS, MSNBC and FOX, Stacy has built a reputation for bringing a unique mix of thoughtful and provocative insight to a wide range of topics. Stacy tackles the demands of a thriving private practice while meeting the daily challenges as a mother of two school-age children. She is a much sought after public speaker on a wide variety of topics, ranging from office and personal relationship issues to anger management  and family politics. In addition to her numerous television appearances, her expertise and unique perspective have been solicited by a diverse group of clients including major corporations, public institutions, government agencies and philanthropic organizations.</p>
        <p>Stacy possesses a unique ability to identify the essence of issues and problems quickly. Her style is honest and forthright, while also bearing the compassion and sensitivity that are fundamental to her profession.</p>
        <p>As a psychotherapist on both Celebrity Fit Club and Lifetime's DietTribe, Stacy Kaiser has gained a reputation for helping people face the truth that is holding them back from leading a life filled with a generous balance of responsibility, fun and freedom. After providing counseling to thousands of individuals both in her private practice and the media, Stacy has identified ten critical areas needed to develop the skills necessary to become a successful, happy and fulfilled adult.</p>
        <img src="images/bio_book.jpg" class="fright" />
        <p>In her new book "How to be a Grown UpThe Ten Secret Skills Everyone Needs to Know" published by HarperCollins, Spring 2010, Stacy opens with a provocative quiz that helps the reader gain insight into his or her current level of life mastery. In the following chapters, she breaks down the readers strengths and weaknesses to guide them towards improving in the ten areas so that they can maximize their success and ultimately their life. A passion for improving the lives of the under served within her community led to Stacy's work with Southern California's premier family resource center, Friends of the Family, where she has worked with battered women, teen parents, abused children and families in crisis for the past 15 years. She has also  been engaged by organizations including the FBI, Los Angeles Fire Department, Los Angeles Unified School District, Kaiser Permanente and Hughes Aircraft to implement workshops and handle third party mediations.</p>
        <p>Stacy Kaiser received her B.A. in Psychology from California State University, Northridge and her M.A. in Clinical Psychology from Pepperdine University. She is a licensed Marriage and Family Therapist and has received advanced training in the areas of human and child development, as well as emotional, physical and sexual abuse.</p>
        </div>
        
        <div id="content_middle">
            <div id="middle">
                <img src="images/header.jpg" style="margin-top:30px;" />
                <img src="images/headshot.jpg" style="margin-top:30px;" />
                <?php include('includes/nav.php'); ?>
                <p style="font-size:.6em; color:#606A66;">Copyright 2007 © <a href="http://www.stacykaiser.com/">www.stacykaiser.com</a>. All rights reserved.</p>
            </div>
        </div>
        
        <div id="content_right"></div>
    
            </div>
        </div>
    </div>
</div>
</body>
</html>

And here's my updated CSS:

@charset "utf-8";
/* CSS Document */

html, body {
background: #615041;
font-family: Arial, Helvetica, sans-serif;
color: #CCC;
font-size: .9em;
padding: 0px;
margin: 0px;
}

h1 {
color: #43C1E3;
font-size: 2.42em;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
letter-spacing: 6px;
margin-bottom: 20px;
padding: 0px;
line-height: 20px;
}

a:link, a:visited, a:active {
color: #43C1E3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

#background_left {
float:left;
width:100%;
position:relative;
right:315px;
background: #665446 url(../images/bkgnd_gradient_left.jpg) repeat-x;
}
#content_left {
float:left;
width:369px;
position:relative;
left:380px;
overflow:hidden;
}
#background_middle {
clear:left;
float:left;
width:100%;
position:relative;
right:50px;
background: #352E2A url(../images/bkgnd_gradient_shadow.jpg) repeat-x;
}
#content_middle {
float:left;
width:313px;
position:relative;
left:395px;
overflow:hidden;
}
#middle {
width: 285px;
height: 100%;
margin: auto;
text-align: center;
background: #463931;
border-left: #45403C 5px solid;
border-right: #45403C 5px solid;
position: relative;
overflow: hidden;
}
/*#content_middle {
float:left;
width:313px;
position:relative;
left:395px;
overflow:hidden;
background: #463931;
border-left: #45403C 5px solid;
border-right: #45403C 5px solid;
}*/
#background_right {
clear:left;
float:left;
width:765px;
overflow:hidden;
background: #977A68 url(../images/bkgnd_gradient_right.jpg) repeat-x;
}
#content_right {
float:left;
width:50px;
position:relative;
left:76.67%;
overflow:hidden;
}


#container_main {
width: 766px;
margin:auto;
}

.hr {
text-align: center;
margin: 15px 0px;
padding: 0px;
}

.fleft {
float: left;
margin: 5px 10px 5px 0px;
}

.fright {
float: right;
margin: 5px 0px 5px 10px;
}

/* NAVIGATION ROLLOVERS */
a#bio:link, a#bio:visited, a#bio:active {
display: inline-block;
width: 117px;
height: 30px;
text-decoration: none;
background: url(../images/nav/bio.png);
}
a#bio:hover {
background-position: -117px 0px;
}
a#mediaexperience:link, a#mediaexperience:visited, a#mediaexperience:active {
display: inline-block;
width: 165px;
height: 30px;
text-decoration: none;
background: url(../images/nav/mediaexperience.png);
}
a#mediaexperience:hover {
background-position: -165px 0px;
}
a#video:link, a#video:visited, a#video:active {
display: inline-block;
width: 90px;
height: 30px;
text-decoration: none;
background: url(../images/nav/video.png);
}
a#video:hover {
background-position: -90px 0px;
}
a#press:link, a#press:visited, a#press:active {
display: inline-block;
width: 145px;
height: 30px;
text-decoration: none;
background: url(../images/nav/press.png);
}
a#press:hover {
background-position: -145px 0px;
}
a#appearances:link, a#appearances:visited, a#appearances:active {
display: inline-block;
width: 200px;
height: 30px;
text-decoration: none;
background: url(../images/nav/appearances.png);
}
a#appearances:hover {
background-position: -200px 0px;
}
a#privatepractice:link, a#privatepractice:visited, a#privatepractice:active {
display: inline-block;
width: 145px;
height: 30px;
text-decoration: none;
background: url(../images/nav/privatepractice.png);
}
a#privatepractice:hover {
background-position: -145px 0px;
}
a#corporateconsulting:link, a#corporateconsulting:visited, a#corporateconsulting:active {
display: inline-block;
width: 184px;
height: 30px;
text-decoration: none;
background: url(../images/nav/corporateconsulting.png);
}
a#corporateconsulting:hover {
background-position: -184px 0px;
}
a#contact:link, a#contact:visited, a#contact:active {
display: inline-block;
width: 105px;
height: 30px;
text-decoration: none;
background: url(../images/nav/contact.png);
}
a#contact:hover {
background-position: -105px 0px;
}

cssfreakie · June 9, 2011

with a bare minimum of effort you would have been able to apply the ready made code to your htmlfile. the only thing i added was the class of .stretch to the div with the id of #middle, and i added the already working jquery at the bottom. The reason i took this jquery approach is because i now noticed you are using a vertical linear gradient. if i would combine the left and right div that would require a huge image and that is not nice. (but you can do that if you don't want to use javascript)

here is the script i used i placed some comments in 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>Stacy Kaiser</title>
<link href="includes/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container_main">
    <div id="background_right">
        <div id="background_middle">
            <div id="background_left">
    
        <div id="content_left">
            <div class="hr"><img src="images/hr.jpg" style="margin-top: 30px; margin-botton: 0px;" /></div>
            <h1>Biography</h1>
            <img src="images/bio_headshot.jpg" class="fleft" />
            <p>Stacy Kaiser is a successful Southern California based licensed psychotherapist, relationship expert and media personality. With over 50 television appearances in the last year on major networks including CNN, NBC, CBS, MSNBC and FOX, Stacy has built a reputation for bringing a unique mix of thoughtful and provocative insight to a wide range of topics. Stacy tackles the demands of a thriving private practice while meeting the daily challenges as a mother of two school-age children. She is a much sought after public speaker on a wide variety of topics, ranging from office and personal relationship issues to anger management  and family politics. In addition to her numerous television appearances, her expertise and unique perspective have been solicited by a diverse group of clients including major corporations, public institutions, government agencies and philanthropic organizations.</p>
        <p>Stacy possesses a unique ability to identify the essence of issues and problems quickly. Her style is honest and forthright, while also bearing the compassion and sensitivity that are fundamental to her profession.</p>
        <p>As a psychotherapist on both Celebrity Fit Club and Lifetime's DietTribe, Stacy Kaiser has gained a reputation for helping people face the truth that is holding them back from leading a life filled with a generous balance of responsibility, fun and freedom. After providing counseling to thousands of individuals both in her private practice and the media, Stacy has identified ten critical areas needed to develop the skills necessary to become a successful, happy and fulfilled adult.</p>
        <img src="images/bio_book.jpg" class="fright" />
        <p>In her new book "How to be a Grown UpThe Ten Secret Skills Everyone Needs to Know" published by HarperCollins, Spring 2010, Stacy opens with a provocative quiz that helps the reader gain insight into his or her current level of life mastery. In the following chapters, she breaks down the readers strengths and weaknesses to guide them towards improving in the ten areas so that they can maximize their success and ultimately their life. A passion for improving the lives of the under served within her community led to Stacy's work with Southern California's premier family resource center, Friends of the Family, where she has worked with battered women, teen parents, abused children and families in crisis for the past 15 years. She has also  been engaged by organizations including the FBI, Los Angeles Fire Department, Los Angeles Unified School District, Kaiser Permanente and Hughes Aircraft to implement workshops and handle third party mediations.</p>
        <p>Stacy Kaiser received her B.A. in Psychology from California State University, Northridge and her M.A. in Clinical Psychology from Pepperdine University. She is a licensed Marriage and Family Therapist and has received advanced training in the areas of human and child development, as well as emotional, physical and sexual abuse.</p>
        </div>
        
        <div id="content_middle">
            <div id="middle" class="middle"><!--  cssfreakie                  added a class here -->
                <img src="images/header.jpg" style="margin-top:30px;" />
                <img src="images/headshot.jpg" style="margin-top:30px;" />
                <?php include('includes/nav.php'); ?>
                <p style="font-size:.6em; color:#606A66;">Copyright 2007 © <a href="http://www.stacykaiser.com/">www.stacykaiser.com</a>. All rights reserved.</p>
            </div>
        </div>
        
        <div id="content_right"></div>
    
            </div>
        </div>
    </div>
</div>
<!-- some javascript to stretch the divs -->
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script type="text/javascript">

        $(document).ready(function(){
            $("div.stretch").css("height",$(document).height());
        });
    </script>
</body>
</html>

p.s. don't forget to mark it solved when it is solved

ShootingBlanks · June 10, 2011

My friend...you are a life-saver. Thank you SO much!!!!

cssfreakie · June 10, 2011

your welcome! say hello to Stacey

ShootingBlanks · June 10, 2011

your welcome! say hello to Stacey

Haha - you know her???

cssfreakie · June 10, 2011

nah, otherwise i would be making that website

Sign In

Containers extending to the bottom of page/content

Recommended Posts

ShootingBlanks

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

ShootingBlanks

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

ShootingBlanks

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

ShootingBlanks

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information