Need help to fix content box not stretching and a sticky footer to bottom

Hello, I just can't seem to find out what is wrong with my content box and why it is not stretching when the content inside it exceeds it's height and I can't figure out how to make a footer stick to the bottom of the page, even when the side pushes further down then the bottom then it should follow to the bottom of the page.

Thanks in advance.

HTML:
<div id="page_container">
    <div id="content_outer">
        <div id="content_inner">
            <div id="content-top">
                <h2>Text Title</h2>
                <span class="clearFix">&nbsp;</span>            </div>
            <div id="col-left">
                <div class="box">
                    <h4 class="yellow">COL1</h4>
                    <div class="box-container">
                    </div>
                </div>
            </div>
            <div id="col-mid">
                <div class="box">
                    <h4 id="SiteName" class="white">
                        COL2
                    </h4>
                    <div class="box-container">
                        <div id="padding">
                            <p>
                        sssssssssssssssss</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>ssssss</p>
                        </div>
                    </div>
                </div>
            </div>
            <div id="col-right">
                <div class="box">
                    <h4 class="light-blue">
                        COL3</h4>
                    <div class="box-container">                    </div>
                </div>
            </div>
        </div>
    </div>
        <div id="footer_outer">
            <div id="footer_inner">            </div>
        </div>
</div>

Open in new window


CSS:
body 
{
	font-size: 9pt;
	font-family: Helvetica, Arial, Tahoma, sans-serif;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

body, html 
{
	height:100%
}


form {
	height: 100%;
}

#page_container {
	width: 100%;
	height: 100%;
	margin:0px;
	padding:0px;
}


#page_container #content_outer {
	width: 100%;
	background-repeat: repeat-x;
	background-color: #f5f5e7;
	position: relative;
}
#page_container #content_outer #content_inner {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 980px;
	padding-top: 25px;
	padding-bottom: 25px;
	top: 0px;
	left: 0px;
}
#page_container #content_outer #content_inner #content-top 
{
    border-bottom: 1px solid #BCBCB7;
    margin-bottom: 15px;
    padding-bottom: 8px;
    background-color: Transparent;
}
#page_container #footer_outer {
	height: 60px;
	width: 100%;
	border-top: 1px solid #3a5863;
	background-color: #3a4f63;
	margin-bottom: 0px;
	padding: 0px;
}
#page_container #footer_outer #footer_inner {
	margin-left: auto;
	margin-right: auto;
	height: 100%;
	width: 980px;
	margin-top: 0px;
	position: relative;
}

span.clearFix {
	width:100%;
	height:0px;
	visibility:hidden;
	clear:both;
	display:block;
	margin:0;
	padding:0;
	font-size:0px;
}
	
.hidden {
	display:none;
}


/** box general settings **/
div.box 
{
	margin-bottom:15px;
	width:100%;
}
div.box-container
{
	background-color:#fff;
	padding:10px;
	margin:0;
}
div.box-container h5 
{
	color:#333;
	padding-left:20px;
	border-bottom:1px solid #fffff;
	font-weight:bold;
	padding-bottom:7px;
	margin-bottom:1px;
	padding-top: 1px;
}
div.box-container h5 span 
{
	font-weight:normal;
	font-size:0.9em;
}
	
div.box h4 
{
	background:#3a4043;
	text-transform:uppercase;
	font-weight:bold;
	padding:10px;
	margin:0;
}


/** columns **/
#col-left, #col-mid
{
	float:left;
	margin-right:12px;
}
#col-mid
{
	width:510px;
	position: relative;
}
#col-right
{
	margin-right:0px;
	float:right;
}
#col-left, #col-right
{
	width:223px;
	position: relative;
}


/** text colors assigned to elements in various areas **/
.yellow 
{
	color:#e8e4a2;
}
.light-blue 
{
	color:#a6b7c0;
}
.blue 
{
	color:#508db8 !important;
}
.white 
{
	color:#fff;
}

Open in new window

JoachimPetersenAsked:
Who is Participating?
 
LZ1Commented:
You always need to clear your floats.

Try this:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body 
{
	font-size: 9pt;
	font-family: Helvetica, Arial, Tahoma, sans-serif;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

body, html 
{
	height:100%
}


form {
	height: 100%;
}

#page_container {
	width: 100%;
	height: 100%;
	margin:0px;
	padding:0px;
}


#page_container #content_outer {
	width: 100%;
	background-repeat: repeat-x;
	background-color: #f5f5e7;
	position: relative;
}
#page_container #content_outer #content_inner {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 980px;
	padding-top: 25px;
	padding-bottom: 25px;
	top: 0px;
	left: 0px;
}
#page_container #content_outer #content_inner #content-top 
{
    border-bottom: 1px solid #BCBCB7;
    margin-bottom: 15px;
    padding-bottom: 8px;
    background-color: Transparent;
}
#page_container #footer_outer {
	height: 60px;
	width: 100%;
	border-top: 1px solid #3a5863;
	background-color: #3a4f63;
	margin-bottom: 0px;
	padding: 0px;
}
#page_container #footer_outer #footer_inner {
	margin-left: auto;
	margin-right: auto;
	height: 100%;
	width: 980px;
	margin-top: 0px;
	position: relative;
}

span.clearFix {
	width:100%;
	height:0px;
	visibility:hidden;
	clear:both;
	display:block;
	margin:0;
	padding:0;
	font-size:0px;
}
	
.hidden {
	display:none;
}


/** box general settings **/
div.box 
{
	margin-bottom:15px;
	width:100%;
}
div.box-container
{
	background-color:#fff;
	padding:10px;
	margin:0;
}
div.box-container h5 
{
	color:#333;
	padding-left:20px;
	border-bottom:1px solid #fffff;
	font-weight:bold;
	padding-bottom:7px;
	margin-bottom:1px;
	padding-top: 1px;
}
div.box-container h5 span 
{
	font-weight:normal;
	font-size:0.9em;
}
	
div.box h4 
{
	background:#3a4043;
	text-transform:uppercase;
	font-weight:bold;
	padding:10px;
	margin:0;
}


/** columns **/
#col-left, #col-mid
{
	float:left;
	margin-right:12px;
}
#col-mid
{
	width:510px;
	position: relative;
}
#col-right
{
	margin-right:0px;
	float:right;
}
#col-left, #col-right
{
	width:223px;
	position: relative;
}


/** text colors assigned to elements in various areas **/
.yellow 
{
	color:#e8e4a2;
}
.light-blue 
{
	color:#a6b7c0;
}
.blue 
{
	color:#508db8 !important;
}
.white 
{
	color:#fff;
}
                                  
								  </style>
</head>

<body>
<div id="page_container">
    <div id="content_outer">
        <div id="content_inner">
            <div id="content-top">
                <h2>Text Title</h2>
                <span class="clearFix">&nbsp;</span>            </div>
                    <div style="clear:both;"></div>

            <div id="col-left">
                <div class="box">
                    <h4 class="yellow">COL1</h4>
                    <div class="box-container">
                    </div>
                </div>
            </div>
            <div id="col-mid">
                <div class="box">
                    <h4 id="SiteName" class="white">
                        COL2
                    </h4>
                    <div class="box-container">
                        <div id="padding">
                            <p>
                        sssssssssssssssss</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>ssssss</p>
                        </div>
                    </div>
                </div>
            </div>
            <div id="col-right">
                <div class="box">
                    <h4 class="light-blue">
                        COL3</h4>
                    <div class="box-container">                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="clear:both;"></div>
        <div id="footer_outer">
            <div id="footer_inner">            </div>
        </div>
</div>
                                  
</body>
</html>

Open in new window

0
 
JoachimPetersenAuthor Commented:
that worked for the footer but what about my content-outer, it is not stretching all the way down to the footer, only the 350px that the content-inner min-height is.
0
 
LZ1Commented:
Add a float:left to your content-outer.

By the way have you seen this?

http://www.code-sucks.com/css%20layouts/faux-css-layouts/
0
 
JoachimPetersenAuthor Commented:
Thank you, and that is a very useful link, I might use it some other time.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.