window resizing issue

I am fairly new to css and am having some issues. I am trying to create a three column layout with a header and a footer. When you resize the web browser and make it smaller, the content in the middle and right column disappear. Also, I am forcing the footer to the bottom by specifying a height attribute. I know this must be possible without specifying a height but I'm not sure how. Maybe with a position or float. An example of this issue can be found at www.behrit.com/test (http://www.behrit.com/test). Thanks for any help below is the css:

.full
{
width: 100%;
border: 1px solid #000;
overflow: hidden;
height: 700px;
}

.left
{
/*clear: left;*/
float: left;
width: 15%;
height: 700px;
border: 1px solid #000;
background-image:url(../img/grey.gif);
background-repeat: repeat-y top center;
}

.center
{
height: 700px;
min-width: 770px;
width: 69%;
float: left;
overflow: hidden;
border: 1px solid #000;
}


.right
{
height: 700px;
width: 15.5%;
float: left;
border: 1px solid #000;
background-image:url(../img/grey.gif);
background-repeat: repeat-y top center;
}
.header
{
height:150px;
border: 1px solid #000;
min-width: 770px;
overflow: hidden;
}
.body
{
height: 486px;
border: 1px solid #000;
min-width: 770px;
}
.footer-container
{
height: 30px;
border: 1px solid #000;
background-color: maroon;
min-width: 700px;
font-family: verdana, arial, sans serif;
color: white;
}
.footer
{
margin-top:4px;
}
.banner
{
font: Arial, sans-serif, larger;
}

.content1 {float: left; width: 500px; margin: 0px; padding: 0px 0px 10px 20px; color: rgb(75,75,75);}

.content1-pagetitle {
overflow: hidden;
width: 480px;
margin: 0px 0px 10px 0px;
padding: 0px 0px 2px 0px;
border-bottom: solid 3px black;
); color: rgb(148,27,18);
font-weight: bold;
font-size: 180%;
}



.content1-container {clear: both; float: left; width: 480px; margin: 0px 0px 15px 0px; padding: 0px;}
.content1-container-1col {overflow: hidden; width: 480px; margin: 0px; padding: 0px;}
.content-txtbox-noshade {margin: 0px; padding: 7px 0px 0px 0px; background-color: rgb(255,255,255);}

.content2 {
color: rgb(75,75,75);
}
content2-text{
font-weight: bold;
font-size: 180%;
}


.buffer {clear: both; height: 30px; margin: 0px; padding: 0px; background-color: rgb(255,255,255) border-right-color: black;}

.nav1
{
height: 25px;
border: 1px solid #000;
background: transparent;
min-width:700px;
}
.nav1 {clear: both; margin: 0px; padding: 0px; font-family: verdana, arial, sans serif; font-size: .70em;}
.nav1 ul {float: left; width: 100%; margin: 0px; padding: 0px; border-top: solid 1px rgb(251,253,47); border-bottom: solid 1px rgb(251,253,47); background-color: maroon; font-weight: bold;}
.nav1 li {display: inline; list-style: none; margin: 0px; padding: 0px;}
.nav1 li a {display: block; float: left; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; border-right: solid 1px rgb(251,253,47); color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; font-size: 100%;}
.nav1 a.selected {color: rgb(255,215,0); text-decoration: none;}
.nav1 a:hover {color: rgb(255,255,0); text-decoration: none;}

.nav3 {overflow: hidden; clear: both; float: left; width: 160px; min-height: 500px; margin: 0px; padding: 0px; color: rgb(75,75,75); font-size: .70em;}
.nav3 ul {width: 160px; margin: 0px 0px 20px 0px; padding: 0px; border-bottom: solid 1px rgb(216,206,159); background-color: rgb(255,255,255);}
.nav3 li {list-style: none; margin: 0px; padding: 0px;}
.nav3 li.title {margin: 0px 0px 0px 0px; padding: 3px 5px 2px 15px; background-color: rgb(128,0,0); color: rgb(255,255,255); text-transform: uppercase; font-weight: bold; font-size: 120%;}
.nav3 li.group a {display: block; min-height: 1.7em; height: auto !important; height: 1.7em; line-height: 1.7em; margin: 0px; padding: 0px 7px 0px 15px; border-top: solid 1px rgb(200,200,200); border-left: solid 7px rgb(165,73,81); color: rgb(75,75,75); font-weight: bold; font-size: 120%;}
.nav3 li a {display: block; min-height: 1.7em; height: auto !important; height: 1.7em; line-height: 1.7em; margin: 0px; padding: 0px 7px 0px 20px; border-left: solid 7px rgb(219,230,241); color: rgb(75,75,75); text-decoration: none; font-size: 120%;}
.nav3 li a.selected {border-left: solid 7px rgb(128,0,0); color: rgb(100,100,100); text-decoration: none;}

.nav3 li a:hover {border-left: solid 7px rgb(128,0,0); color: rgb(100,100,100); text-decoration: none;}

Hello mperzel,
Have a look at a 3-column I've done with a footer that sticks to the bottom until there is content, from any column, to push it down.

link (http://nopeople.com/CSS/full-height-layout/index.html)

Thanks, this is really close to what I am looking to code. I haven't had a chance to go through your code and see how you did it differently. I am still interested in knowing why the content disappears when the window is resized for future reference if anyone knows.

Thanks, this is really close to what I am looking to code. I haven't had a chance to go through your code and see how you did it differently. I am still interested in knowing why the content disappears when the window is resized for future reference if anyone knows.

It's your .min-width: 770px; on .content
In IE7 and FF .content disappears when the window is less than 770px. IE7 ignores min-width settings so .content stays visible.

Okay so I took the css from your example and changed a few things such as colors and the header height but this introduced a new problem. In firefox, after the content section there is a small bar of background color that shows and then the footer. IE doesn't have this issue. I think my problem is I increased the header height which "pushed" everything else down. I don't understand what keeps the footer at the bottom of the page so a brief explanation would be appreciated. Thanks! An example of the problem can be seen at www.behrit.com/Takedown

Play with that negative margin in #footer, should do the trick.
#footer{
width: 798px;
height: auto;
clear: both;
border: 2px solid #000;
background-color: maroon;
font-family: verdana, arial, sans serif;
color: white;
font-size: 1.2em;
margin: -20 auto 0 auto;}

Okay so I took the css from your example and changed a few things such as colors and the header height but this introduced a new problem. In firefox, after the content section there is a small bar of background color that shows and then the footer. IE doesn't have this issue. I think my problem is I increased the header height which "pushed" everything else down. I don't understand what keeps the footer at the bottom of the page so a brief explanation would be appreciated. Thanks! An example of the problem can be seen at www.behrit.com/Takedown You are using an extra float to the content and there by some extra clears. To make a 2-column layout, there is no need to apply floats to the two columns. Instead apply a float+some width to the either of one (small one would be easy) , and some adequate margin to the other one. Check http://bonrouge.com/2c-hf-fixed.php

Now, in your case, have a try by
.content1 {/*Takedown (line 44)*/
color:#4B4B4B;
/*float:left;*/
margin-left:170px; /* > width of left column */
padding:0px 0px 10px 20px;
/*width:500px;*/
}
.content1-pagetitle {
border-bottom:3px solid black;
color:#941B12;
font-size:180%;
font-weight:bold;
margin:0px 0px 10px;
overflow:hidden;
padding:0px 0px 2px;
/*width:480px;*/
}
.content1-container {
/*clear:both;
float:left;*/
margin:0px 0px 15px;
padding:0px;
/*width:480px;*/
}


btw, make sure that you don't have any divitis (http://csscreator.com/?q=divitis) :)