OK I searched and didn't find it, and went to a couple of websites and still didn't find it.

I know there is a way to make columns expand down with the amount of content.

I have a 2 column design, and the content will be longer in one than the other, so I want them both to expand

the site is
www.flyvifc.org/v2_0/

the html and css is there.

the things I have tried are still the the css, but commented out, the best I have been able to achieve is a expanding column but no background, or a wrapper with a fixed length.

I think I need to get my eye's checked

Hey Dave, Wazzzzup?

Not the best at .css myself, but I have loads of pages that (I think) do what you are looking for. For me, it has to do with these 2 lines of code in my (much simpler cause I don't know any better) .css file:

Now, I know this is not usable "as is", but the float:right is because I have my navigation on the left side of the main content, which will explain why my container and content have different widths. Using this code, I can have a full width footer under my content, with this:

That gives me a navigation section, another section under that (also on the left, expandable). The #extra is just another layer like a footer that I can give a different shaded background, to make the look feel more dimentional, or add content as if highlighted. You can take out the #extra and nave/belownave stuff, but I left then there to show how all that blends together. You can styalize your .css for your colors and such.
Please make sure to try this out on a test page only. I would feel real bad if this messed up your page. Good Luck, and let me know if any of this made sense.

Hey Cliff long time to talk to, how are the dogs?

I re-read my origional post and realized I was less than clear (rather unclear really).

My problem is that my container is not expanding down with the colums.

http://i130.photobucket.com/albums/p248/pug2775/ScreenShot053.png

the related CSS:

#content {
margin: 0 auto;
background: url(../assets/bodyback.gif) repeat-y;
color: #9c0001; /*burgundy*/
padding: 0px;
width: 800px;
height:300px;
/*height: auto;*/
/*float: none;*/
}
#maincontent {
/*position: absolute;*/
/*color:#821122;*/
/*background-color:#E2CCB6;*/
/*margin-left: 25px*/
padding:0px;
width:520px;
height: auto;
float:left;
}
#contentbox {
position: absolute;
color:#c59a6f;
background-color:#191919;
margin-left: 553px;
padding:0px 0 0;
width:190px;
height: auto;
float:right;
}

I tried the height auto but is just collapses onto itself.

David,

What is the CSS for the wrapper?

I think it is the wrapper that is not expanding.

#wrapper {
background-color: #91918f; /*grey*/
color: #9c0001; /*burgundy*/
background: url(../assets/wrapperbackground.png) repeat-y;
width: 840px;
/*height: 400px;*/
padding: 0px;
margin: 0 auto;
text-align: left;
height: auto;
}

Whole CSS
body {
background: url(../assets/sectional.jpg) no-repeat;
/*background: url(../assets/background.png) repeat-x;*/
background-color: #91918f; /*grey*/
color: #191919; /*black*/
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
text-align: center;
}
#wrapper {
background-color: #91918f; /*grey*/
color: #9c0001; /*burgundy*/
background: url(../assets/wrapperbackground.png) repeat-y;
width: 840px;
/*height: 400px;*/
padding: 0px;
margin: 0 auto;
text-align: left;
height: auto;
}
#masthead {
/*background-color: #91918f; /*grey*/*/
/*background: url(../assets/banners/banner_3.png) center no-repeat;*/
color: #9c0001; /*burgundy*/
padding-top: 0px;
padding-left: 17px;
width: 800px;
height: 200px;
}
#navcontainer {
background-color: #91918f; /*grey*/
background: url(../assets/menubar.png) no-repeat;
color: #9c0001; /*burgundy*/
padding: 0px;
width: 840px;
height: 40px;
}
.farhar {
padding:0px;
width:190px;
height: 59px;
border-bottom: none;
margin: 0 0 0 0;
text-indent: -5000px;
display: none;
}
#content {
margin: 0 auto;
background: url(../assets/bodyback.gif) repeat-y;
color: #9c0001; /*burgundy*/
padding: 0px;
width: 800px;
height:300px;
/*height: auto;*/
/*float: none;*/
}
#maincontent {
/*position: absolute;*/
/*color:#821122;*/
/*background-color:#E2CCB6;*/
/*margin-left: 25px*/
padding:0px;
width:520px;
height: auto;
float:left;
}
#contentbox {
position: absolute;
color:#c59a6f;
background-color:#191919;
margin-left: 553px;
padding:0px 0 0;
width:190px;
height: auto;
float:right;
}
#footer {
clear: both;
margin: 0 auto;
/*padding-left: -20px;*/
background: url(../assets/wrapperbottom.png) center no-repeat;
color: #9c0001; /*burgundy*/
width: 840px;
height: 34px;
}

/* NAVIGATION SECTION */

ul#navigation-1 {
margin:0;
padding: 7px 0 0 7px;
list-style:none;
width:800px;
height:21px;
/*border-top:1px solid #b9121b;
border-bottom:1px solid #b9121b;*/
font:normal 8pt verdana, arial, helvetica;
}
ul#navigation-1 li {
margin:0;
padding:0;
display:block;
float:left;
position:relative;
width:100px;
}
ul#navigation-1 li a:link, ul#navigation-1 li a:visited {
padding:4px 4px;
display:block;
text-align:center;
text-decoration:none;
/*background:#b9121b;*/
color:#ffffff;
width:100px;
height:13px;
}
ul#navigation-1 li:hover a, ul#navigation-1 li a:hover, ul#navigation-1 li a:active {
padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background:#91918F;
color:#ffffff;
width:100px;
height:13px;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
}
ul#navigation-1 li ul.navigation-2
{
margin:0;
padding:1px 1px 0;
list-style:none;
display:none;
background:#ffffff;
width:100px;
position:absolute;
top:21px;
left:-1px;
border:1px solid #b9121b;
border-top:none;
}
ul#navigation-1 li:hover ul.navigation-2
{
display:block;
}
ul#navigation-1 li ul.navigation-2 li
{
width:100px;
clear:left;
width:100px;
}
ul#navigation-1 li ul.navigation-2 li a:link, ul#navigation-1 li ul.navigation-2 li a:visited
{
clear:left;
background:#9C0001;
padding:4px 0;
width:100px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}
ul#navigation-1 li ul.navigation-2 li:hover a, ul#navigation-1 li ul.navigation-2 li a:active, ul#navigation-1 li ul.navigation-2 li a:hover
{
clear:left;
background:#91918F;
padding:4px 0;
width:100px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}
ul#navigation-1 li ul.navigation-2 li ul.navigation-3
{
display:none;
margin:0;
padding:0;
list-style:none;
position:absolute;
left:100px;
top:-2px;
padding:1px 1px 0 1px;
border:1px solid #b9121b;
border-left:1px solid #b9121b;
background:#ffffff;
z-index:900;
}
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3
{
display:block;
}
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
{
background:#b9121b;
}
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active
{
background:#ec454e;
}
ul#navigation-1 li ul.navigation-2 li a span
{
position:absolute;
top:0;
left:132px;
font-size:12pt;
color:#fe676f;
}
ul#navigation-1 li ul.navigation-2 li:hover a span, ul#navigation-1 li ul.navigation-2 li a:hover span
{
position:absolute;
top:0;
left:132px;
font-size:12pt;
color:#ffffff;
}

David,

I do not have any height statements in my wrapper when using columns. Have you tried without any height statements? Just a wild guess on my part.

Hey Bill, I tried commenting out the Height: auto; in wrapper portion of the CSS and got no change, so I also commented out the height: 300px; in the content section and got the following:

http://i130.photobucket.com/albums/p248/pug2775/ScreenShot054.png

I then set height: auto; in the content section
and got the same results.

This has me stumped.

Just to clarify as to what I am thinking here
I have a body, within the body I build a wrapper, inside that wrapper I build a masthead, then a nav container, and then a content box that I want to be expandible down.
Inside the content box I build to more boxes maincontent (left), and contentbox (right).

Both the maincontent and content boxes are expanding with the amount of test information, but the content box is not.

David,

I verified that my outer div has no height statements, but the inner divs do have height.

This is what I use for my outer div:

margin-left:5%;
margin-right:5%;
position:relative;
margin:0 auto;
padding:0 0 9px;
width:770px;
border-style: solid;
border-width: 1px;


And this is my left div (which is similar to the others):

float: left;
margin-left: 5px;
margin-right: 5px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
width: 228px;
Height: 550px;

I adjust my inner div style to meet the required height. I don't know of another way.