CSS - How To Make Div Grow To 100% In Height ?

i have 2 divs

one is a navigation bar, the other is the pages main contents.

the contents and navigation links changes from page to page so i need a method so if the content is long, the navigation will stretch down long too to be the same height of the content, and the same thing vice versa.

how do i go about doing this?

If you take a look here http://www.challengeyourdiet.com/login

you may notice that the page does not go all the way down on big screens. I would like my footer to automatically fall to the bottom of the page no matter what screen size someone has. Any ideas?

Thanks!

I'm having trouble getting the height to be the same for two divs. One is a big content area (left) and the other is a vertical menu (right) that is created dynamically with PHP. I need the bottom of both divs to line up UNLESS there is a lot of content in the left div that makes the left side taller. (So, if there's not much text in the left content area, it should go ahead and line up with the bottom of the menu.) Is this possible? I'm stumped. Any help would be greatly appreciated! Thank you.

Code:

#content {width: 750px;height: 100%;position: relative;margin: 10px 25px 0 25px;}

/*BEGIN LOCATION PAGES MINIMUM HEIGHT STYLES*/
/* for Mozilla/Safari/Opera */
*>.boxContent {padding-top: 900px;min-height: 1px;}
*>#locDoctors, .locInfoMap {margin-top: -900px;}
/* for IE, with IE5/Mac backslash filter \*/
* html .boxContent {height: 900px;}
/* end filter */
/*END LOCATION PAGES MINIMUM HEIGHT STYLES*/

/*BEGIN LOCATION BOX*/
#locationBox {background-image: url(../images/location/pgBotLocation.gif);background-repeat: no-repeat;width: 614px;height:810px;position: relative;background-position: bottom;background-color: #DDF0F2;}
#locationBox .boxTop {background-image: url(../images/location/pgTopLocation.gif);background-repeat: no-repeat;width: 100%;height: 20px;}
#locationBox .locInfoMap {width: 100%;height: 408px;background-image: url(../images/location/mapLarge.gif);background-repeat: no-repeat;background-position: top right;}
#locationBox .boxBot {background-image: url(../images/location/pgBotLocation.gif);background-repeat: no-repeat;width: 100%;height: 15px;}
/*END LOCATION BOX*/

/*LOCATION MENU START*/
#locationMenu {width: 136px;position: absolute;z-index: 10;right: 0px;}
#locMenuList {margin: 0;padding: 0;font-size: 9px;list-style: none;}
#locMenuList li {margin: 0;padding: 0;display: inline;}
#locMenuList li.main {height: 30px;height /**/: 30px;/* for IE5/Win only */ }
#locMenuList li.sub {height: 20px;height /**/: 20px;/* for IE5/Win only */ }
#locMenuList li a {text-decoration: none;color: #FFFFFF;}
#locMenuList li.locHead {display: block;margin: 0;padding: 10px 9px 9px;font-weight: 900;color: #FFFFFF;}
...
/*LOCATION MENU END*/

Code:

<div id="content"><!--CONTENT SECTION START-->
   PHP MENU IS CREATED HERE...
   <div id="locationBox"><!--OPEN BOX-->
      <div class="boxTop"></div>
      <div class="boxContent">
         <div class="locInfoMap">
            MAIN CONTENT GOES HERE...
         </div>
      </div>
   </div><!--CLOSE BOX-->
</div><!--CONTENT SECTION END-->

I'm not so CSS savvy, can anyone help me with the specific changes needed here that will force the 3 columns to load height at 100% or full column height?

Also is it possible to have multiple content boxes loading one above the other in the left and right columns instead of one long content box?

jarsandmixes.com/liquid.php





body {
background-color: #FFF7EF;
}

div {
text-align:center;
}

div#wrapper {
background-color: transparent;
border:0px solid black;
margin:0px auto;
text-align:left;
position:relative;
width:100%;
height:100%;
min-height:100%;
}

div#border {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
width:100%;
height:10px;
}

div#page {
background-color: #DEC6B5;
border:1px dashed black;
position:relative;
clear:both;
float:left;
width:100%;
height:100%;
min-height:100%;
padding-bottom: 10px;
overflow:hidden;
}

div#header {
background-image: url(images/.gif);
background-repeat: no-repeat;
border:1px dashed black;
margin:0px;
padding:0px;
width:100%;
height:80px;
}

div#menu {
clear: both;
background-color: #CA7B93;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
width:100%;
height:30px;
}

div#left1 {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
border:1px solid black;
float:left;
margin:5px;
width:20%;
height:auto;
}

div#left2 {
background-color: #FFF7EF;
background-image: url(images/bkg3.gif);
background-repeat: repeat;
border:1px solid black;
margin:0px 5px 0px 5px;
padding:4px;
right:20px;
width:90%;
height:auto;
}

div#content1 {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
border:1px solid black;
margin:5px auto;
width:54%;
height:auto;
}

div#content2 {
background-color: #DEC6B5;
background-image: url(images/bkg3.gif);
border:1px solid black;
margin:0px 5px 0px 5px;
padding:4px;
width:96%;
height:auto;
}

div#divider {
background-image: url(images/.gif);
background-repeat: no-repeat;
margin:10px auto;
width:439px;
height:60px
}

div#right1 {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
float:right;
border:1px solid black;
margin:5px;
right:10px;
width:20%;
height:auto;
}

div#right2 {
background-color: #FFF7EF;
background-image: url(images/bkg3.gif);
background-repeat: repeat;
border:1px solid black;
margin:0px 5px 0px 5px;
padding:4px;
right:20px;
width:90%;
height:auto;
}

div#footer {
clear: both;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
width:100%;
height:30px;
}

How do you make a container div aware of the height of floated divs nested inside?

I have 2 floated divs, which are contained within a container div. The container has a background image that I need to tile vertically.

In FF the image does not tile unless I specifiy a height for the container other than auto. I don't want to set it to 100% because when I do, the container div extends much further than I intend it to.

Here is the link to the site with the problem.

CSS
Code:

 /* CSS DOCUMENT */
html, body {
  padding: 0px 0px 0px 0px;
  font: 10px Verdana, Arial, Halvetica;
  height: 100%;
  text-align: center;
  background: url(../images/bdy_back.jpg) #252525 no-repeat center;

#container {
  width: 938px;
  margin: 0 auto;
  text-align: left;
  height: auto;
  opacity: .90;
  filter: alpha(opacity=90);
  background: url(../images/middle2.jpg) repeat-y right #444444;
}
#lcol{
  float: left;
  width: 15%;
  height: auto;
}

#right {
  float: right;
  width: 85%;
  height: 100%;
}


}
 

HTML
Code:

<div id="container">
  <div class="hdr">

	<div id="officer" style="display: none;"></div>
  </div>
  <div id="lcol">
   
  </div>
  <div id="right">
    
  </div>
</div>
<div id="footer">

</div>

I have stripped the whole page down to the bare bones and can not seem to get the center DIV to be the same height as the rest of the page.

Is there a simple fix for this or would I need to redo it completely ?

The left and right content is not always the same so their height is also variable. I have a min-height in the center DIV, and using height 100% does not seem to work either.

Can anyone suggest what I could change to make it the same or suggest how I redo this so it is.

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to our web site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--

body { border: 0em solid #000; background-color: #ddd; }

.bodyContainer { background-color: blue; height: 100%; width: 71.875em; margin: 0em auto; padding: 0em 0em 0em 0em;		border: 0em solid #000; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }

.menu {	background: #3F65CC; margin: 0em; text-align: center; font-size: 1.1em; font-family: Broadway; border: 0em solid #EDB6B6; padding: 0.313em 0em 0.313em 0em; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }

.clearfloat {			clear: both; }

.leftSidePanel { background-color: blue;	float: left;	width: 8.835em; min-height: 43.75em; padding: 0.313em 0.625em 0em 0.625em; }

.mainContent { background-color: lightblue;	margin: 0em auto; text-align: center; border-left: 0.5em solid #ddd; border-top: 0.3em solid #ddd; border-right: 0.5em solid #ddd; float: left; width: 49.4em; min-height: 43.438em; height: 100%; padding: 0.625em 0.625em 0.625em 0.625em; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }

.formWrapper{ margin: 0em auto; min-height: 43.375em; border: 0em dashed #E5E5E5; padding: 0em; text-align: left; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }

.rightSidePanel	{ background-color: blue;	float: right;	width: 8.835em; min-height: 43.75em; padding: 0.313em 0.713em 0em 0.313em; }

.footer { background-color: #ddd; margin: 0 auto; text-align: center; padding: 1em 0em 0em 0em; border: 0em solid #fff; font-size: 0.875em; }

--></style>

</head>
<body>
<!-- bodyContainer start -->
<div class="bodyContainer">


	<!-- menu start -->
	<div class="menu">

		<div class="clearfloat"></div>

	</div>
<div class="clearfloat"></div>
	<!-- menu end -->

<div class="leftSidePanel">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>

		<!-- mainContent start -->
		<div class="mainContent">

		<div class="formWrapper">

		<br><br><br>

		</div>

		</div>
		<!-- mainContent end -->

	<div class="rightSidePanel">

	</div>

	<!-- Footer start -->
<br class="clearfloat">
<div class="footer">
some text
</div>








</div>
<!-- body container end -->

</body>
</html>

Hello,

I've created a wrapper div for my main content and I center it on the page by setting margin left and right to auto. I add some content to it but the height of the wrapper never grows larger than the content. How can I make it so the background color of the wrapper, for example, goes to the bottom of the browser regardless of the amount of content inside of it? Thanks in advance.

The situation is very simple:

Code:

<div id="maindiv" style="border:1px solid #000000; width:400px; margin:0px; padding:0px;">
    <div id="reddiv" style="border:1px solid #FF0000; width:150px; float:left;">
        red box<br>
        red box<br>        
        red box<br>
        red box<br>
        red box<br>        
        red box<br>                
	</div>

    <div id="greendiv" style="border:1px solid #00FF00; margin-left:170px; width:100px;">
        green box<br>
        green box<br>
        green box<br>
        green box<br>        
	</div>
</div>  

AS you can see, I have a main div. Inside it, I have 2 divs:
red and green. If I enter text into the green div, the main div resizes automatically. But if I enter text into the red div, the main div doesn't resize, and so the red div overflows.

What I need is either enter text in the red or green divs and make the main div to auto resize.

(I'm using Mozilla FireFox)

Any Idea?

I deleted the other posting as it take too long to work on it and it doesn't work. So, I got the other code from google search and decided to use it. There, I rearrange, redo, customzie the scripts to make it work better. Now I have one problem. See the class "wrapper" that make use of the height. I when I have it set at 100%, the footer extend too far down and the vertical scroll bar appear at the right. This is not what I want. I figure maybe it's because of the float that the browser doesn't know the real height of the header and footer. Can anyone help? I would really apppreciated it.


Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  background-color: #FFFF00;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
}
html {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  width: 100%;
}
table {
  border: 0px solid #000000;
  border-collapse: collapse;
  border-spacing: 0px;
}

#columnleft {
  margin: 0px;
  padding: 0px;
  width: 10%;
  height: 100%;  /* Required by IE to inherit from wrapper (IE Hack) above */
  background-color: #0000FF;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: absolute; */
  float: left;
}
#columnright {
  margin: 0px;
  padding: 0px;
  width: 10%;
  height: 100%;  /* Required by IE to inherit from wrapper (IE Hack) above */
  background-color: #0000FF;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: absolute; */
  float: right;
}
#footer {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 65px;
  background-color: #FFCC00;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: relative; */
}
#clearfooter {
  clear: both;
}
#header {
  margin: 0px;
  padding: 0px;
  width: 100%; 
  height: 65px;
  background-color: #FFCC00;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position:relative; */
}
#main {
  margin: 0px;
  padding: 0px;
  width: 79.8%;  /* #columnleft + #main + #columnright = 100% width, but take away 0.02% for the #main due to for some browser's inaccurate mathetical rendering, such as 100.1% or 100.2% which cause the Right Column to jump to the bottom, so 99.8 % total width is better as it make the browser's glitch not be that noticeable. Just add some background color to the #wrapper so that the color can match either the #main or #columnright */
  height: 100%;  /* Required by IE to inherit from wrapper (IE Hack) above */
  background-color: #FFFFFF;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: relative; */
  float: left;
}
#wrapper {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  /* min-height: 80%; */  /* Might not be needed, it's an IE Hack... */
  background-color: #FF0000;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: relative; */
}
/* IE Hack - Layout REQUIRES a height here to work */
/*
* html #wrapper {height: 100%;}
*/
</style>
</head>

<body>
<div id="header">Header Text</div>
 <div id="wrapper">
  <div id="columnleft">Left Text</div>
  <div id="main">Center Content</div>
  <div id="columnright">Right Text</div>
 </div>
<div id="clearfooter"></div>
<div id="footer">Footer Text</div>
</body>
</html> 

Thanks,
FletchSOD

I tried to use height:auto, and put it into the main container, then I put it in the div that is floated. Nothing works in firefox for me. Ive tried searching on google but I cant find anything that works.

Basically, its not just an issue with floats, in general, what is the correct way to set divs, to auto expand to cover what is inside and that works in IE, Firefox and safari, is there a way to ?


Thanks in advanced.

Hello,

I've found many threads on making your sidebar appear as if it is growing with tiling backgrounds, but my situation is a tad more unique. My project can be found he
http://tinyurl.com/ygq22wa

If you are on the home page and click "About Us", the content behaves as I want it. The problem is, I want the sidebar to grow with the content, but only underneath the links. I want the bolts image to always be at the lower left of the page, and the "middle" of the sidebar to grow (so that the links stay put, but the sidebar grows underneath to match the content div). That way, I won't have undesired empty space next to the content when the page grows more than the min-height I have defined for the sidebar.

I've seen some Javascript solutions, but I really would like to accomplish this with CSS.

Big thanks to anyone who can help.

I have like this psudo-code:

Code:

<div id=parent  position: absolute>
<div id=child1 position: relative>
</div>
<div id=child2 position: absolute>
</div>
</div>

As I fill up child1 with text or content, the parent grows along with it. I would like the child2 div to grow along with it as well. That is the concept. Here is the real code:
Code:

<div  style="border: solid 3px; position: absolute; top: 0px; left: 0; width: 300px">


<div style="border: solid green; position: relative; width: 150px">
<p class="bodyCopy">
	Lots of text to fill out the div and make it grow.
	<br/><br/>
	A lot more text I wish I knew that latin phrase everyone uses to fill out text, better than making stuff up 
	<br/><br/>The next paragraph to make a div grow.
<p class="bodyCopy">
	Lots of text to fill out the div and make it grow.
	<br/><br/>
	A lot more text I wish I knew that latin phrase everyone uses to fill out text, better than making stuff up 
	<br/><br/>The next paragraph to make a div grow.
<p class="bodyCopy">
	Lots of text to fill out the div and make it grow.
	<br/><br/>
	A lot more text I wish I knew that latin phrase everyone uses to fill out text, better than making stuff up 
	<br/><br/>The next paragraph to make a div grow.

</div>

<div style="position: absolute; top: 0px; right: 0px; height: 100%; width: 10px; border: solid red 3px;">
</div>
<div style="border: solid blue 1px; position: absolute; height: 10px; width: 10px; left: 200px; bottom: -14px;">
</div>
</div>

I also have a test page here

This pretty much does what I would expect(or what I want) in FF, but not IE or Opera.

I would like this to be dynamic and not use any javascript. Does anyone have any suggestions?

Thanks for your time,

CJB

Hi all,
I've been struggling with a basic layout question for a while and I could use some direction as a recent CSS convert. Basically I have a two column layout contained within another div (for borders and colors). What is happening is that my container only grows vertically to the size of the right column regardless of the size of the the left. Is there a way to "attach" the containing div to which ever column is the tallest?

I've setup a test page to show the problem. This occurs in I.E. 6.0 and Firefox 1.5.x (Windows and Unix).

Thanks very much for any pointers.

can i make my left column, the same height as my right column? or infact, if the left is taller than the right, the right extends to it and if the right is taller than the left the left extends to it?

is this possible, cheers

heres my css:
left column, is #leftNav and the right column is #contentMain

PHP Code:
#content {
        margin:0px auto;
        padding: 0;
        width: 760px;
    }
    
    #contentMain {
        padding: 0;
        margin: 0;
        float: right;
        width: 632px;
    }

    #leftNav {
        color: #000;
        float: left;
        margin: 0;
        padding: 0;
        width: 128px;
    }